css切/分割背景图详解（background-image)

CSS中的background-image属性允许您为元素设置多个背景图像。通过使用linear-gradient或其他图像函数，可以创建复杂的背景图案。

以下是一些使用background-image的示例：

1. 设置单个背景图像：

div {
  background-image: url('image.jpg');
}

2. 设置多个背景图像：

div {
  background-image: url('image1.jpg'), url('image2.jpg');
}

3. 使用渐变和图像混合模式创建复杂背景：

div {
  background-image: linear-gradient(to right, red, yellow), url('image.jpg');
  background-blend-mode: multiply;
}

4. 分割背景图像：

div {
  background-image: linear-gradient(to right, red 50%, transparent 50%), url('image.jpg');
}

在这个示例中，我们使用了一个线性渐变创建了一个红色条纹，然后通过设置渐变中红色的位置来“分割”背景图像。这里使用了透明度来实现视觉效果，但实际上并没有改变图像本身，只是遮盖了图像。如果需要实际切割图像，可能需要使用其他技术，如使用background-position或者负值background-position来“切割”图像。