CSS mengandungi berbilang pemilih pseudo, yang mana '::before' adalah salah satu daripadanya. Setiap pseudo-selector CSS membolehkan kami menggayakan elemen HTML menggunakan gaya yang berbeza.
Selain itu, pemilih pseudo ‘::before’ membolehkan kami menyediakan imej latar belakang untuk HTML tertentu, yang akan kami pelajari dalam tutorial ini.
Sebelum kita memulakan tutorial, mari kita jelaskan bahawa ':before' dan '::before' adalah sama. CSS2 menggunakan ':before', manakala CSS3 menggunakan '::before'.
Tatabahasa
Pengguna boleh menggunakan pseudo-selector '::before' untuk menetapkan imej latar belakang bagi elemen HTML tertentu mengikut sintaks berikut.
.div::before {
content: "";
background-image: url("URL");
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
Salin selepas log masuk
Dalam sintaks di atas, kami telah menggunakan pemilih '::before' dengan pemilih css. Sebenarnya, ia menambah kandungan sebelum elemen. Di sini, kami menggunakan kandungan kosong kerana kami tidak perlu menetapkan sebarang kandungan HTML. Kami menggunakan sifat imej latar belakang untuk menetapkan imej latar belakang, dan sifat kedudukan untuk menetapkan kedudukan imej latar belakang.
Contoh 1 (Tetapkan imej latar belakang menggunakan '::before' pseudo-selector)
Dalam contoh di bawah, kami telah mencipta elemen div yang mengandungi kelas "latar belakang". Dalam CSS, kami menggunakan nama kelas untuk mengakses elemen div dan menggunakan gaya CSS. Selain itu, kami menggunakan nama kelas elemen div dan pemilih pseudo "::before" untuk menambah imej latar belakang.
Kami menetapkan kedudukan atas, bawah, kiri dan kanan dalam pemilih. Selain itu, kami menambah beberapa sifat yang berkaitan dengan imej latar belakang untuk memanipulasinya. Dalam output, pengguna boleh memerhati imej latar belakang pada keseluruhan halaman web.
<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>
Salin selepas log masuk
Contoh 2 (Tetapkan imej latar belakang untuk elemen div tertentu)
Dalam contoh di bawah, kami menunjukkan penggunaan pemilih pseudo '::before' untuk menetapkan imej latar belakang untuk elemen div tertentu
Di sini, kami menetapkan dimensi untuk imej dalam pemilih pseudo untuk menetapkan imej latar belakang hanya untuk elemen div tertentu Selain itu, kami menggunakan sifat 'saiz latar belakang: penutup'.
Dalam output, kita boleh melihat elemen div yang mengandungi imej latar belakang dan bukannya keseluruhan elemen 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>
Salin selepas log masuk
Contoh 3 (menetapkan kecerunan linear sebagai latar belakang menggunakan pemilih ‘::before’)
Dalam contoh di bawah, kami menggunakan '::before' pseudo-selector untuk menetapkan kecerunan linear ke latar belakang elemen HTML tertentu. Di sini, kami menggunakan fungsi linear-gradient() sebagai nilai sifat 'background' untuk menetapkan kecerunan ke latar belakang dan bukannya imej.
Dalam output, kita boleh melihat kecerunan sebagai latar belakang elemen 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>
Salin selepas log masuk
Kami belajar untuk menetapkan imej latar belakang menggunakan pemilih pseudo ‘::before’ Apabila kami menggunakan mana-mana pemilih pseudo untuk menambah kandungan pada halaman web, ia menambah kandungan secara bebas dengan mengalih keluar kandungan daripada aliran semasa halaman web.
Jadi, kita boleh menggunakan pseudo-selectors untuk menambah kandungan pada halaman web tanpa menjejaskan kandungan semasa. Selain itu, ia boleh menambah kandungan di atas halaman web. Di sini anda juga boleh menambah imej latar belakang di atas kandungan lain, tetapi kami menggunakan atribut "z-index" untuk menetapkan imej sebagai latar belakang elemen div.
Atas ialah kandungan terperinci Bagaimana untuk meletakkan imej latar belakang menggunakan ::before pseudo-selector dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
