css3实现父元素半透明子元素不透明
在写网页中经常会遇到一个半透明的颜色层，但其子元素是不透明的效果。
操作方法
- 01
以实现给“父元素添加透明度为0.7的黑色背景，子元素为白色不透明的文字”的效果为例来说明。为了看到透明效果，我们先给body添加红色背景；为了方便对比，我们同时也创建一个“父元素半透明子元素也半透明”的div。
- 02
html代码： <body> <div class="rgba"> 1. 这里是父元素半透明子元素不透明的效果 <p>我是子元素文字</a> </div> <div class="opacity"> 2. 这里是父元素半透明子元素也半透明的效果 <p>我是子元素</a> </div> </body>
- 03
css代码： body{background-color: red;} div{width: 300px;height: 200px;color: #fff;} div.rgba{background-color: rgba(0,0,0,0.7);} div.opacity{background-color: #000;opacity: 0.7;margin-top: 20px;} p{margin-top: 20px;}
- 04
得出最终结果：可以看出第一个div实现了父元素半透明子元素不透明，第二个子元素是父元素和子元素均透明。
赞 (0)