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

最新推荐文章于 2021-06-02 23:42:53 发布

原创最新推荐文章于 2021-06-02 23:42:53 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #Google

CSS 专栏收录该内容

3 篇文章

订阅专栏

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

<!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>