请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2022-4-11 19:52 编辑
CSS融合技术里除了有 mix-blend-mode 系列混合滤镜(用于融合元素与元素),还有背景融合滤镜 background-blend-mode 系列滤镜(用于融合背景,不与其上的元素融合),和前者一样,也有 16 种滤镜效果。我们后面的演示需要设定一个CSS类选择器 .bgBox :
.bgBox {
margin: 10px auto 0;
width: 500px;
height: 300px;
padding: 10px;
position: relative;
background: red url('/data/attachment/forum/202201/29/223322rnkonc43jlnsb44m.jpg') no-repeat center/cover;
}
上面的CSS,我们给 bgBox 类选择器设定了盒子的背景色和背景图片,我们的意图是想通过下面的HTML代码实现背景色与背景图片的融合:
<div class="bgBox" style="background-blend-mode: darken;">No.5 darken</div>
我们要写 16 行这样的HTML代码,以便观察不同滤镜下元素背景色与元素背景图片的融合效果。顺便提一下,很重要的:一是不同的背景色与图片融合的效果不尽一样;二是背景融合支持多种滤镜混合使用,方便时可以试试;三是元素的背景支持多个背景图片,这意味着多个背景图片之间也可以相互融合并且可以混合应用多种滤镜。
效果将在下楼展示,我用JS来生成HTML代码,它生成的代码是酱紫: <div class="bgBox" style="background-blend-mode: normal;">No.1 normal</div> <div class="bgBox" style="background-blend-mode: multiply;">No.2 multiply</div> <div class="bgBox" style="background-blend-mode: screen;">No.3 screen</div> <div class="bgBox" style="background-blend-mode: overlay;">No.4 overlay</div> <div class="bgBox" style="background-blend-mode: darken;">No.5 darken</div> <div class="bgBox" style="background-blend-mode: lighten;">No.6 lighten</div> <div class="bgBox" style="background-blend-mode: color-dodge;">No.7 color-dodge</div> <div class="bgBox" style="background-blend-mode: color-burn;">No.8 color-burn</div> <div class="bgBox" style="background-blend-mode: hard-light;">No.9 hard-light</div> <div class="bgBox" style="background-blend-mode: soft-light;">No.10 soft-light</div> <div class="bgBox" style="background-blend-mode: difference;">No.11 difference</div> <div class="bgBox" style="background-blend-mode: exclusion;">No.12 exclusion</div> <div class="bgBox" style="background-blend-mode: hue;">No.13 hue</div> <div class="bgBox" style="background-blend-mode: saturation;">No.14 saturation</div> <div class="bgBox" style="background-blend-mode: color;">No.15 color</div> <div class="bgBox" style="background-blend-mode: luminosity;">No.16 luminosity</div>
|