您现在的位置是: 首页 » 网页代码 » css子元素不透明怎么做
网页代码

css子元素不透明怎么做

网站优化小编十一月 3, 2019 6人已围观

在我们编写网页时会用到设置元素透明效果,但是有时我们设置父元素不透明度时,此父元素的子元素也会产生透明效果,我们该怎么设置子元素不透明呢?

网站运营中栏目排名优化技巧

css中常用设置不透明度的方法有opacity与rgba两种,这两个属性都可以设置元素透明度,但是有opacity属性的所有后代元素都会继承 opacity属性,而RGBA后代元素不会继承不透明属性。

所以css可以通过rgba方法设置父元素透明度,不对子元素进行透明度设置即可使子元素不透明。

示例:

    <style type="text/css">        .box{            width: 300px;            height: 150px;            background: #000000;            opacity: 0.4        }        .child{            width: 100%;            height: 100px;            background: green;            font-size: 16px;        }        .box1{            width: 300px;            height: 150px;            background: rgba(0,0,0,0.4)        }    </style><body>   <div class="box">       <p class="child">浮动的子元素</p>   </div>    <div class="box1">       <p class="child">浮动的子元素</p>   </div></body>

效果图:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:202天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2595 条
  • 文章评论:5 条
  • 微信公众号:扫描二维码,关注我们