如何使用CSS中的::before偽選擇器來放置背景影像？
- 王林轉載
- 2023-08-19 20:21:182627瀏覽
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 the webweb page .
所以，我們可以使用偽選擇器為網頁新增內容，而不影響目前內容。此外，它還可以在網頁上方添加內容。在這裡，它還可以在其他內容上方添加背景圖像，但我們使用了“z-index”屬性將圖像設置為div元素的背景。
以上是如何使用CSS中的::before偽選擇器來放置背景影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！