半透明的层上放一个不透明层

iteye_15136

于 2009-08-19 11:44:06 发布

阅读量145

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS HTML Google

本文链接：https://blog.youkuaiyun.com/iteye_15136/article/details/81758439

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文通过一个简单的HTML页面示例展示了如何使用CSS来设置元素的透明度，并且通过两个不同透明度的div元素进行对比说明。页面还包含了一个iframe元素用于展示外部网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> new document </title>
  <meta name="generator" content="editplus">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <style type="text/css">
   #div1 {
    position: absolute;
    background-color: #ccc;
    width: 100px;
    height: 100px;
    left: 100px;
    top: 100px;
    filter:alpha(opacity=60);
    -moz-opacity: 0.60;
    opacity: 0.60;
   }

   #div2 {
    position: absolute;
    background-color: #99FF99;
    width: 100px;
    height: 100px;
    left: 150px;
    top: 150px;
   }
  </style>
 </head>

 <body>
  <iframe src="http://google.com" width="400" height="300"></iframe>
  <div id="div1">
   半透明
  </div>
  <div id="div2">
   不透明
   <button>不透明，不是吗？</button>
  </div>
 </body>
</html>