h5开发踩坑:正确设置透明度属性

我手里有一张设计图:

右侧的绿框和里面的文字“今天”用了同样的颜色值,区别是绿框的透明度是10%,而文字的透明度是100%。我写了一个<view>(等同于<div>)用来设置绿色框的属性,其中opacity = 10%;在这个<view>里面有子元素<text>(等同于<p>),里面设置opacity = 100%。

可结果确实这样的:

排查问题的过程就不详细介绍了,在chrome的开发者工具中的【元素】里一顿乱改,最后发现文字的透明度好像和它父元素的透明度一样了。我搜了一下子元素和父元素的透明度关系,发现不管子元素的opacity值是多少,只要父元素设定了opacity,子元素的opacity就和父元素的一样。那该怎么办呢?

在css中,除了用opacity来设置透明度,还可以用rgba(【red】, 【green】, 【blue】, 【alpha】)中的alpha值来设置透明度,并且这样设置透明度不会影响到子元素的透明度

代码示例:

background: rgba(77, 197, 145, 0.1);

不过这样做以后需要调小一点阴影的alpha值,不然阴影就会显得比更改前硬一些。

参考文献:(8条消息) css父元素透明度(opacity)对子元素的影响_张兴华的博客-CSDN博客_opacity影响子元素

阅读更多

留下评论