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

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;
}

在上述语法中，我们使用了带有css选择器的 ‘::before’ 选择器。实际上，它会在元素之前添加内容。在这里，我们使用了空内容，因为我们不需要设置任何HTML内容。我们使用了 background-image 属性来设置背景图片，使用 position 属性来设置背景图片的位置。

示例1（使用 ‘::before’ 伪选择器设置背景图片）

在下面的示例中，我们创建了一个包含 ‘background’ 类的 div 元素。在 CSS 中，我们通过类名访问 div 元素并应用 CSS 样式。我们还使用了 div 元素的类名和 ‘::before’ 伪选择器来添加背景图片。我们在选择器中设置了上部、下部、左部和右部的位置。此外，我们还添加了一些与背景图片相关的属性来操纵它。在输出中，用户可以在整个网页上观察到背景图片。

<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.tutorialspoint.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.tutorialspoint.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 元素的背景。