当给一个元素添加多个背景图像时,我们可以给每个图像应用不同的混合模式。每个图像和它下面的元素融合,最终与元素的背景色background-color
融合。
.blend {
background-color : #8c4549;
background-image : url(blend-01.jpg), url(blend-02.jpg);
background-blend-mode : lighten, multiply; }
在这个例子中,图片blend-02.jpg
和background-color
融合,采用multiply
模式;图片blend-01.jpg
与第二个图片融合,然后background-color
用lighten
模式。
肯定还有更多的方式来使用background-blend-mode
,而不只是混合单一的背景图像和颜色。设计师可以混合多个背景图像,以创造更加丰富和充满深度的设计,我很高兴看到这种新的属性能让我们创造更多的可能。