css 背景图片可以覆盖背景颜色

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; bottom: 0; right: 0; position: absolute; z-index: -1; } ``` 上面的代码会给一个 `div` 元素设置一个半透明的背景图片。 `::before` 伪元素被设置为相对于 `div` 元素的绝对定位，从而成为 `div` 的背景层 - 也就是说，该层会位于背景颜色的上方。 `z-index` 属性指定了层叠顺序，为了让背景图片位于背景颜色之后，我们将其设置为负数。 此外，我们还通过 `top`、 `left`、 `bottom`、和 `right` 属性使该层覆盖整个元素。不透明度通过 `opacity` 属性实现。 在上面的代码中，你可以将背景图片替换为任何其他的图片。如果你想要更好的控制图片的位置和大小，你可以使用 `background-size`、 `background-position` 和 `background-repeat` 属性，它们可以在元素的背景图片上进行详细的设置。 总而言之，通过使用 `::before` 伪元素、透明度和位置属性，你可以很容易地将背景图片放置在背景颜色上方，从而解决背景颜色遮盖背景图片的问题。