2023年7月19日发(作者：)

超实⽤！利⽤CSS3将两个图⽚叠加在⼀起显⽰今天本⽂给⼤家分享两种利⽤CSS3将两个图⽚叠加融合在⼀起显⽰的特效。废话不多说，我们直接开始吧~第⼀种⽅法：利⽤mix-blend-mode属性

利⽤:first-child选择器选中第⼀个img图⽚，给他设置绝对定位；然后利⽤添加关键代码mix-blend-mode: soft-light;设置融合混合模式，将上下两张图⽚融合在⼀起。效果图如下：

说明：mix-blend-mode 属性描述了元素的内容应该与元素的直系⽗元素的内容和元素的背景如何混合。取值情况：mix-blend-mode: normal; // 正常mix-blend-mode: multiply; // 正⽚叠底mix-blend-mode: screen; // 滤⾊mix-blend-mode: overlay; // 叠加mix-blend-mode: darken; // 变暗mix-blend-mode: lighten; // 变亮mix-blend-mode: color-dodge; // 颜⾊减淡mix-blend-mode: color-burn; // 颜⾊加深mix-blend-mode: hard-light; // 强光mix-blend-mode: soft-light; // 柔光mix-blend-mode: difference; // 差值mix-blend-mode: exclusion; // 排除mix-blend-mode: hue; // ⾊相mix-blend-mode: saturation; // 饱和度mix-blend-mode: color; // 颜⾊mix-blend-mode: luminosity; // 亮度按效果来分可以分为这⼏类：基础混合模式 normal 利⽤图层透明度和不透明度来控制与下⾯的图层混合降暗混合模式 darken,multiply,color-burn 减⾊模式，滤掉图像中⾼亮⾊，从⽽达到图像变暗加亮混合模式 screen,lighten,color-dodge 加⾊模式，滤掉图像中暗⾊，从⽽达到图像变亮融合混合模式 overlay,soft-light,hard-light ⽤于不同程度的对上、下两图层的融合变异混合模式 difference,exclusion,hard-light ⽤于制作各种变异的图层混合⾊彩叠加混合模式 hue,saturation,color,luminosity 根据图层的⾊相，饱和度等基本属性，完成图层融合⽅法2：利⽤背景属性 直接在background-image中指定多个背景路径即可，效果图如下：

以上就是超实⽤！利⽤CSS3将两个图⽚叠加在⼀起显⽰的详细内容。（）