CSS | 将背景图像与渐变叠加相结合

在 Web 开发中，我们经常需要将背景图像与渐变叠加在一起来实现炫酷的效果。下面是几种方法：

方法一：多层背景

我们可以使用多层背景来实现将背景图像与渐变叠加。

background-image: url('bg.jpg'), linear-gradient(#f00, #0f0);

这样就可以将背景图像与从红到绿的渐变叠加在一起。

方法二：伪元素

我们可以使用伪元素来实现将背景图像与渐变叠加。

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

div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#f00, #0f0);
  z-index: -1;
}

这样就可以将背景图像与从红到绿的渐变叠加在一起。

方法三：filter

我们可以使用 filter 来实现将背景图像与渐变叠加。利用 CSS filter 的 blur 实现模糊效果，再将模糊后的图片覆盖在渐变上。

div {
  background-image: url('bg.jpg'), linear-gradient(#f00, #0f0);
  filter: blur(10px);
  background-size: cover;
}

这样就可以将背景图像与从红到绿的渐变叠加在一起，并且实现了模糊效果。

以上就是三种将背景图像与渐变叠加相结合的方法，可以根据实际需求选择适合自己的方法。