软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

CSS混合模式高级应用

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

Web设计中的CSS混合模式开始了解CSS混合模式实战CSS混合模式CSS中的合成与混合模式使用CSS处理图像效果不可思议的颜色混合模式 mix-blend-mode不可思议的混合模式 background-blend-mode两行 CSS 代码实现图片任意颜色赋色技术CSS3混合模式mix-blend-modebackground-blend-mode简介CSS混合模式CSS混合模式DEMO @codepen

如果你了解过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