CSS 基础学习-179 opacity 属性为元素的背景添加透明盒效果

由 hrs, 24 二月, 2022

 opacity 属性为元素的背景添加透明盒效果

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    div {
        background-color:green;
        padding:20px;
        width:400px;
    }
    div.div1{
      opacity:0.1;
    }
    div.div2{
      opacity:0.3;
    }
    div.div3{
      opacity:0.6;
    }
    </style>
  </head>
  <body>
    <h1>透明盒</h1>
    <p>当使用opacity属性为元素背景添加透明度时，其所有子元素也将变为透明。<br />这可能会使完全透明的元素内的
文本难以阅读。</p>
    <div class="div1" >opacity 0.1</div>
    <div class="div2">opacity 0.3</div>
    <div class="div3">opacity 0.6</div>
    <div>opacity 1（default）</div>
  </body>

</html>
~

运行效果：

css-179.png

标签

评论