CSS 背景
图片可以覆盖背景颜色
CSS 提供了一种非常方便的方式来设置元素的背景 - 背景
图片和背景颜色。然而，当同时设置这两个
属性时，有时候会出现一些问题 - 背景色会遮盖住背景
图片，使其无法被看到。接下来，我们将讨论如何使用 CSS 让背景
图片覆盖背景颜色。
在 CSS 中设置背景
图片和背景颜色的方式如下：
```
div {
background-image: url(example.jpg);
background-color: blue;
}
```
上面的
代码会给
一个 `div` 元素设置
一个背景
图片和背景颜色。然而，如果你将 HTML
代码应用到
一个 `div` 元素上，你会发现背景色会遮盖住背景
图片，最终只能看到背景色。
为了
解决这个问题，我们需要给背景
图片设置
一个不透明的背景。你可以在 CSS 中使用 `::before` 伪元素来实现这个
效果。具体
代码如下：
```
div {
position: relative;
background-color: blue;
}
div::before {
content: "";
background-image: url(example.jpg);
opacity: 0.5;
top: 0;
left: 0;
b
ottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
```
上面的
代码会给
一个 `div` 元素设置
一个半透明的背景
图片。 `::before` 伪元素被设置为相对于 `div` 元素的绝对定位，从而成为 `div` 的背景层 - 也就是说，该层会位于背景颜色的上方。 `z-index`
属性指定了层叠顺序，为了让背景
图片位于背景颜色之后，我们将其设置为负数。
此外，我们还通过 `top`、 `left`、 `b
ottom`、和 `right`
属性使该层覆盖整个元素。不透明度通过 `opacity`
属性实现。
在上面的
代码中，你可以将背景
图片替换为任何其他的
图片。如果你想要更好的控制
图片的位置和大小，你可以使用 `background-size`、 `background-position` 和 `background-repeat`
属性，它们可以在元素的背景
图片上进行详细的设置。
总而言之，通过使用 `::before` 伪元素、透明度和位置
属性，你可以很容易地将背景
图片放置在背景颜色上方，从而
解决背景颜色遮盖背景
图片的问题。
