如何使用CSS中的::before伪选择器来放置背景图像？-css教程-PHP中文网

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

王林

发布： 2023-08-19 20:21:18

转载

4292人浏览过

如何使用css中的::before伪选择器来放置背景图像？

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

Also, the ‘::before’ pseudo selector allows us to set up the background image for the particular HTML, which we are going to learn in this tutorial.

在我们开始教程之前，让我们澄清一下，':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元素设置背景图像）

In the example below, we demonstrated to use of the ‘::before’ pseudo selector to set the background image for the particular div element.

Here, we set the dimensions for the image in the pseudo selector to set the background image for only a particular div element. Also, we used the ‘background-size: cover’ property.

In the output, we can see the div element containing the background image rather than the whole div element.

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

登录后复制

Example 3 (setting up the linear gradient as a background using the ‘::before’ selector)

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

In the output, we can see the gradient as a background of the div element.

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

登录后复制

We learned to set the background image using the ‘::before’ pseudo selector. When we use any pseudo selector to add content to the web page, it adds content independently by removing the content from the current flow of the web page.

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

以上就是如何使用CSS中的::before伪选择器来放置背景图像？的详细内容，更多请关注php中文网其它相关文章！