如何在 CSS 中使用 ::before 伪选择器放置背景图像?

cssweb developmentfront end technology更新于 2024/10/17 2:20:17

CSS 包含多个伪选择器，其中之一就是 '::before' 伪选择器。每个 CSS 伪选择器都允许我们使用不同的样式来设置 HTML 元素的样式。

此外，'::before' 伪选择器还允许我们为特定的 HTML 设置背景图像，我们将在本教程中学习这一点。

在开始本教程之前，让我们先澄清一下 ':before' 和 '::before' 是相同的。CSS2 使用 ':before'，而 CSS3 使用 '::before'。

语法

用户可以按照以下语法使用 '::before' 伪选择器为特定的 HTML 元素设置背景图像。

.div::before {
   content: "";
   background-image: url("URL");
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
}

在上述语法中，我们将"::before"选择器与 CSS 选择器结合使用。实际上，它会在元素之前添加内容。此处，我们选择的是空内容，因为我们不需要设置任何 HTML 内容。我们使用 background-image 属性设置背景图像，并使用position属性设置背景图像的位置。

示例 1(使用"::before"伪选择器设置 Background-image)

在下面的示例中，我们创建了包含"background"类的 div 元素。在 CSS 中，我们使用类名访问 div 元素并应用 CSS 样式。此外，我们还使用"::before"伪选择器和 div 元素的类名来添加背景图像。

我们在选择器中设置了顶部、底部、左侧和右侧的位置。此外，我们还添加了一些与背景图像相关的属性来对其进行操作。在输出中，用户可以观察到整个网页的背景图像。

<html>
<head>
   <style>
      .background {
         padding: 15px;
         margin-bottom: 15px;
         width: 500px;
         height: 500px;
         font-size: 20px;
         text-align: center;
      }
      .background::before {
         content: "";
         background-image: url("https://www.cainiaomax.com/static/images/simply-easy-learning.png");
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         background-repeat: no-repeat;
         background-position: center;
         background-size: 100%;
         z-index: -1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
   <div class = "background"> Welcome to the TutorialsPoint! </div>
</html>

示例 2(为特定 div 元素设置背景图像)

在下面的示例中，我们演示了如何使用"::before"伪选择器为特定 div 元素设置背景图像。

在这里，我们在伪选择器中设置了图像的尺寸，以便仅为特定 div 元素设置背景图像。此外，我们还使用了"background-size: cover"属性。

在输出中，我们可以看到包含背景图像的 div 元素，而不是整个 div 元素。

<html>
<head>
   <style>
      .background {
         padding: 15px;
         margin-bottom: 15px;
         color: red;
         width: 500px;
         height: 500px;
         font-size: 20px;
         text-align: center;
         font-size: 3rem;
      }
      .background::before {
         content: "";
         background-image: url("https://www.cainiaomax.com/static/images/simply-easy-learning.png");
         position: absolute;
         background-repeat: no-repeat;
         background-position: center;
         width: 500px;
         height: 500px;
         background-size: cover;
         z-index: -1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
   <div class = "background"> We set the linear gradient on the background image. </div>
</html>

示例 3(使用"::before"选择器将线性渐变设置为背景)

在下面的示例中，我们使用"::before"伪选择器将线性渐变设置为特定 HTML 元素的背景。这里，我们使用 linear-gradient() 函数作为"background"属性的值，将渐变设置为背景，而不是图像。

在输出中，我们可以看到渐变作为 div 元素的背景。

<html>
<head>
   <style>
      .background {
         width: 600px;
         height: 300px;
         position: relative;
         text-align: center;
         color: green;
         font-size: 30px;
         font-weight: bold;
         font-family: Arial, Helvetica, sans-serif;
         padding: 20px;
      }
      .background::before {
         content: "";
         background: linear-gradient(to right, red 0%, orange 50%, yellow 100%);
         background-size: cover;
         background-position: center;
         position: absolute;
         top: 0; left: 0; right: 0;  bottom: 0; opacity: .5;z-index: -1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
   <div class = "background"> We have set the linear gradient for this div element using the '::before' pseudo selector. </div>
</html>

我们学习了如何使用"::before"伪选择器设置背景图像。当我们使用任何伪选择器向网页添加内容时，它都会通过从网页的当前流中移除内容来独立添加内容。

因此，我们可以使用伪选择器向网页添加内容，而不会影响当前内容。此外，它还会将内容添加到网页上其他内容的顶部。在这里，它也在其他内容的顶部添加了一个背景图像，但我们使用了"z-index"属性将图像设置为 div 元素的背景。