background-blend-mode让图片背景底部虚化

`background-blend-mode` 是 CSS3 中的一个特性，它主要用于控制两个背景层之间的混合方式，可以创造出一些非传统的背景叠加效果，包括图片背景的虚化或融合。在想要让图片背景底部虚化时，你可以使用这个特性结合 `linear-gradient` 或者 `transparent` 来实现：

.container {
  position: relative;
  overflow: hidden; /* 确保内容不会超出容器 */
}

.container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /* 要虚化的高度，可以根据需求调整 */
  background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5)); /* 透明度从下至上变化 */
  background-blend-mode: multiply; /* 或者 blend-mode: overlay, 都能实现模糊效果 */
}

在这个例子中，`container` 的背景图会和`::before`伪元素产生的线性渐变混合，因为设置了 `multiply` 或 `overlay` 模式，底层颜色会被上面的颜色“乘”或“覆盖”，所以底部分会变得越来越模糊。

相关问题

background-blend-mode

background-blend-mode是CSS3中的一个属性，用于指定背景图像的混合模式。它可以让多个背景图像混合在一起，产生出新的效果。这个属性可以用于任何元素的背景，包括body元素、div元素、img元素等。常见的混合模式有multiply、screen、overlay、darken、lighten等。

怎么样background-blend-mode和background-repeat: repeat;一起使用

当将background-blend-mode和background-repeat: repeat;一起使用时，图像将以重复模式平铺在背景上，并且background-blend-mode属性将决定图像与背景颜色的混合模式。

例如，如果您有一个背景图像和一个背景颜色，您可以使用以下CSS代码将它们结合起来：

background-image: url('your-image.jpg');
background-color: #fff; /*背景颜色*/
background-repeat: repeat; /*平铺模式*/
background-blend-mode: multiply; /*混合模式*/

在这个例子中，图片将在背景上重复平铺，并且使用multiply混合模式与背景颜色混合。您可以尝试使用不同的混合模式（如screen、overlay、hard-light等）来创建不同的效果。