CSS混合模式高级应用

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

首先要声明的是,我们在这篇文章中要了解的不是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中的backgrou

剩余80%内容付费后可查看

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

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

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