📅 最后修改于: 2023-12-03 14:52:15.976000 🧑 作者: Mango
在 CSS 中使用 ::before 伪选择器可以在一个元素之前添加内容，并且可以作为元素的背景图像。这个伪元素可以用于在元素前加上一些内容，例如小箭头、图标等，使得页面看上去更加美观。本文将介绍如何使用 ::before 伪选择器放置背景图像。
使用 ::before 伪选择器时，我们需要指定一个 content 属性来设置要添加的内容，也可以通过设置 background-image 来指定背景图像。
选择器::before {
content: "";
background-image: url("path-to-image");
}
需要注意的是，::before 伪选择器创建的伪元素默认是内联元素，如果需要设置为块级元素，可以通过 display 属性来设置。
首先，让我们来看一个简单的示例，这个示例展示了如何在一个 HTML 元素之前添加一个小箭头：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
margin-top: 50px;
width: 200px;
height: 100px;
background-color: #ccc;
}
.box::before {
content: "";
position: absolute;
top: -10px;
left: 10px;
border-top: 10px solid transparent;
border-right: 10px solid #ccc;
border-bottom: 10px solid transparent;
}
</style>
</head>
<body>
<div class="box">这是一个示例</div>
</body>
</html>
在上面的示例中，我们使用了 ::before 伪选择器，将一个小箭头添加到了 .box 元素的前面。可以看到，我们通过设置 content 属性为空字符串，实现了在元素前添加一个小箭头的效果。
如果我们需要设置一个背景图像，则可以在 ::before 中使用 background-image 属性来指定：
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url("path-to-image");
background-size: cover;
opacity: 0.5;
}
在上面的示例中，我们将 .box 元素的背景图像放置在了 ::before 伪元素中，同时使用了 background-size 属性来设置背景图像的大小。
总之，使用 ::before 伪选择器可以在一个 HTML 元素之前添加内容，并且可以作为元素的背景图像。这个伪元素可以用于在元素前加上一些内容，例如小箭头、图标等，使得页面看上去更加美观。如果我们需要设置背景图像，则可以使用 background-image 属性来指定。要记得在 ::before 中添加 content 属性以保证伪元素可见。