[CSS] css opacity和 color Hex opacity的区别

接上文[《[CSS] HEX格式color不透明度变换》](https://segmentfault.com/a/1190000043633202)

使用css的opacity属性 (不透明度) 来给元素设置不透明度,可以发现opacity越小,颜色越接近背景色。
css的opacity不仅影响元素content区域(content区域中的文字也会变的于背景色更接近),也会影响元素的border,当opacity为0时,元素存在,视觉上不可见,边框一并消失。

使用getHexOpacity的方式先获取透明色(opacityColor),再将背景色设置为opacityColor( background-color: var(--opacityColor) )这种方式在颜色本身与css opacity的实现视觉上无区别,有区别的是,其中不透明度为0的元素边框还在。

直接给元素设置 opacity,这种方式设置的是整个元素的透明度,它会影响元素及其所有内容和边框的透明度,而不仅仅是背景色的透明度。即元素的所有部分都会变得半透明。

通过 getHexOpacity制备透明色,再将其作为 background-color 属性的值设置给元素。这种方式设置的是元素的背景色的透明度,而不是元素本身的透明度。即元素的内容和边框的透明度并没有改变,只有背景色的透明度改变了。

如果需要调整元素的整体透明度,可以使用第一种方式(设置css的opacity)。如果仅需要调整元素的背景色的透明度,可以使用第二种方式。

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/rdu2e33k066o9gs9

作者:DiracKeeko原文地址:https://segmentfault.com/a/1190000043665839

%s 个评论

要回复文章请先登录注册