以下是一个简单的示例，演示了如何使用 background-blend-mode 属性创建图像拼合效果：
.container {
width: 300px;
height: 200px;
background-image: url('background-image.jpg');
background-color: #3498db;
background-blend-mode: multiply; /* 设置混合模式为 multiply */
color: white;
text-align: center;
line-height: 200px;
}
在这个例子中，.container 元素具有一个背景图像和一个背景颜色。通过设置 background-blend-mode: multiply;，图像和颜色将以 multiply 模式混合在一起，产生一种深蓝色的效果。你可以尝试其他混合模式，例如 screen、overlay 等，以获得不同的效果。
示例：
.container {
width: 300px;
height: 200px;
background-image: url('background-image.jpg');
background-color: #e74c3c;
background-blend-mode: screen; /* 设置混合模式为 screen */
color: white;
text-align: center;
line-height: 200px;
}
在这个例子中，使用了 screen 模式，产生了一种红色透明的效果。你可以根据需要调整混合模式和颜色，以获得所需的图像拼合效果。
这项技术通常用于创建艺术性的背景或添加一些视觉效果。需要注意的是，background-blend-mode 属性在某些老版本的浏览器中可能不被支持，因此在使用时需要谨慎考虑兼容性。
转载请注明出处：http://www.zyzy.cn/article/detail/4018/CSS