暗化背景图片 CSS

CSS可用于改变web页面的背景图片亮度和对比度。在某些情况下，你可能需要把背景图片变暗，以使文本或其他元素更加突出或易于阅读。这篇文章将介绍如何在CSS中实现暗化背景图片的效果。

opacity属性

最基本的暗化背景图片的方法是使用opacity属性。这个属性的取值范围是0到1，1表示完全不透明，0表示完全透明。将背景图片的opacity属性设置为0.5，就可以把图片变暗一半。

body {
  background-image: url("bg.jpg");
  opacity: 0.5;
}

然而，这个方法虽然简单，但它也适用于背景图片上的所有元素。如果您希望仅仅暗化背景图片而不影响上面的任何元素，那么这个方法就不适用了。

mix-blend-mode属性

另一种使背景图片变暗的方法是使用mix-blend-mode属性。这个属性可以将背景图片和其他元素混合在一起，从而改变图片的颜色和亮度等属性。我们可以使用“multiply”值来暗化背景图片。

body {
  background-image: url("bg.jpg");
  mix-blend-mode: multiply;
}

这个方法只会对混合模式下的元素产生作用，因此，您可以使用其他元素来遮盖掉背景图片的不需要变暗的部分。

filter属性

CSS filter属性提供了一系列滤镜，可用于修改图像的色彩，亮度和对比度等属性。 这个属性的取值包含预定义的函数，像blur()和brightness()。 我们可以通过brightness()函数来暗化背景图片。

body {
  background-image: url("bg.jpg");
  filter: brightness(50%);
}

这个方法只会对背景图片产生作用，不会影响其他元素。 并且，我们可以通过调整百分比的值来控制暗化的程度。

总结

以上是几种在CSS中使背景图片变暗的方法。从基本的opacity属性到滤镜函数brightness()，我们可以根据不同的需求来选择合适的方法，以方便地实现背景图片暗化的视觉效果。

# 完整代码

```css
body {
  background-image: url("bg.jpg");
  opacity: 0.5;
}

body {
  background-image: url("bg.jpg");
  mix-blend-mode: multiply;
}

body {
  background-image: url("bg.jpg");
  filter: brightness(50%);
}