乐趣区

关于css: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

退出移动版