CSS混合模式高级应用

首先要声明的是,我们在这篇文章中要了解的不是CSS混合模式如何使用,而是来一起探索CSS混合模式的一些高级运用以及它能做些什么,又会带来什么样的效果。操作过像Photoshop这样的图像处理软件的同学,对于图层混合模式一定不会感到陌生,但对于CSS中的混合模式,估计还是有不少的同学会感到陌生或者好奇。如果你从未接触过CSS混合模式相关的知识,那么建议你先花点时间阅读下面这几篇文章:

如果你了解过CSS的混合模式,那就知道,其实他非常的简单,有关于CSS的混合模式相关的属性有:

  • background-blend-mode:用于元素的背景图像、渐变和背景颜色的混合
  • mix-blend-mode:用于元素的内容应该与元素的直系父元素的内容和元素的背景的混合
  • isolation:隔离isolation的作用是创建一个堆叠上下文(Stacking Context),主要用于与mix-blend-mode属性一起使用时,将混合模式只应用于某一个元素或某一组元素;当和background-blend-mode属性一起使用时,可以只混合一个指定元素栈的背景,它允许使一组元素从它们后面的背景中独立出来,只混合这组元素的背景

有关于isolation相关的介绍,可以阅读@张鑫旭老师的《理解CSS3 isolation: isolate的表现和作用》一文。

当然,这个时候很多同学难免会问到,浏览器对其兼容性如何?事实上,现代浏览器对他们的支持度已经非常的不错了。

文章最开始我们就提到了,在这篇文章并不会介绍CSS的混合模式相关的属性怎么使用,而会探讨CSS的混合模式的一些高级运用,以及对应的效果。

渐变混合模式

background中的background-image可以使用CSS的渐变属性,言外之意,CSS渐变绘制的图形其实类似于背景图像。我们可以使用linear-gradient()radial-gradient()repeating-linear-gradient()repeating-radial-gradient()conic-gradient()repeating-conic-gradient()等函数来绘制背景图。这些属性除了conic-gradient()repeating-conic-gradient()之外都得到了较好的支持。但庆幸的是,这两个属性也进入了W3C的CSS Image Values and Replaced Content Module Level 4中,而且通过CSS Houdini能得到部分浏览器的支持。

如果你对CSS的conic-gradient属性感兴趣,可以花点时间阅读下面的教程:

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/advanced-effects-with-css-background-blend-modes.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部