CSS 基础学习-180 使用RGBA颜色值透明框

由 hrs, 27 二月, 2022

使用RGBA颜色值透明框

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    div {
        background-color:green;
        padding:20px;
        width:400px;
    }
    div.div1{
        background-color:rgba(76,175,80,0.1);
    }
    div.div2{
        background-color:rgba(76,175,80,0.3);
    }
    div.div3{
        background-color:rgba(76,175,80,0.6);
    }
    </style>
  </head>
  <body>
    <h1>使用RGBA颜色值透明框</h1>
    <p>注意使用opcaity属性时文本以及背景颜色如何变得透明。</p>
    <div class="div1" >RGBA 0.1</div>
    <div class="div2">RGBA 0.3</div>
    <div class="div3">RGBA 0.6</div>
    <div>RGBA 1（default）</div>
  </body>

</html>
~

运行效果：

css-180.png

标签

评论