Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan jarak kabur dalam CSS?
Bagaimana untuk menetapkan jarak kabur dalam CSS?
- WBOYke hadapan
- 2023-09-01 22:37:021487semak imbas
CSS (Cascading Style Sheets) ialah alat yang berkuasa untuk mereka bentuk kesan visual tapak web anda. Kesan Kabur ialah salah satu daripada banyak ciri dalam CSS yang digunakan untuk mengaburkan sebarang sifat elemen menggunakan Kaburkan. Untuk mencipta kesan lembut, termenung atau menarik perhatian kepada elemen tertentu pada halaman, kita boleh menggunakan kesan kabur.
Tatabahasa
css element {
filter : blur (amount)
}
Konsep jarak kabur dalam CSS
Sebelum membincangkan aspek praktikal penetapan jarak kabur, adalah penting untuk memahami konsep jarak kabur. Jumlah kabur yang digunakan pada unsur dipanggil jarak kabur. Nilai boleh ditakrifkan dalam piksel (px), em atau unit CSS lain.
Cara menggunakan jarak kabur dalam CSS menggunakan sifat "kabur"
Untuk menetapkan jarak kabur dalam CSS, anda perlu menggunakan atribut kabur. Sifat Kabur menetapkan jumlah kabur yang harus digunakan pada elemen. Untuk menggunakan atribut Kabur, kami mula-mula memilih elemen yang kami mahu gunakan kesan kabur dan kemudian tetapkan atribut Kabur kepada nilai yang dikehendaki.
Sebagai contoh, untuk menggunakan kesan kabur pada imej, kita boleh menggunakan kod CSS berikut -
img {
filter : blur(5px)
}
Di sini kami telah memilih elemen "img" dan menggunakan kesan kabur 5 piksel padanya.
Contoh 1
Berikut adalah contoh kod lengkap kaedah di atas.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
img {
filter: blur(3px);
}
</style>
</head>
<body>
<h3>Applying blur distance in CSS using the 'blur' property</h3>
<img src="https://www.tutorialspoint.com/dip/images/einstein.jpg" alt="My Image">
</body>
Kami boleh menggunakan jarak kabur yang berbeza pada elemen yang berbeza dalam halaman web. Untuk melakukan ini, kita boleh memilih setiap elemen secara individu dan menetapkan sifat "kabur" kepada nilai yang dikehendaki. Contohnya -
h1 {
filter : blur(3px)
}
img {
filter : blur(5px)
}
Di sini, kami telah memilih dua elemen, yang pertama "h1" dan yang kedua "img", dan menggunakan kesan kabur sebanyak 3 piksel dan 5 piksel dengan sewajarnya.
Contoh 2: Gunakan jarak kabur yang berbeza pada elemen yang berbeza
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
p{
filter: blur(2px);
font-size: 20px;
color: red;
}
img {
filter: blur(3px);
}
</style>
</head>
<body>
<h3>Applying blur distance in CSS using the 'blur' property</h3>
<p>Applied blur distance 2 pixels in CSS using the 'blur' property</p>
<img src="https://www.tutorialspoint.com/dip/images/einstein.jpg" alt="My Image">
</body>
</html>
Buat kesan fokus dengan jarak kabur dalam CSS
Mencipta kesan fokus ialah penggunaan kesan kabur yang paling biasa dalam CSS. Kesan ini dicapai dengan menggunakan kesan kabur pada semua elemen pada halaman web kecuali elemen fokus.
Untuk mencipta kesan fokus dengan jarak kabur dalam CSS, gunakan sifat "kabur" dengan kelas pseudo ":bukan". Kelas pseudo ':not' membolehkan pengguna memilih semua elemen kecuali elemen tertentu. Contohnya -
.blur * {
transition: all 0.5s ease-in-out;
}
.blur:hover *:not(.no-blur) {
filter: blur(5px);
}
Di sini, kami menggunakan atribut "kabur" pada semua elemen anak kelas "kabur" apabila pengguna menuding di atas kelas "kabur". Kesan ini tidak berfungsi pada elemen dengan kelas "no-blur", kerana menggunakan pseudo-class "no" akan mengecualikan elemen dengan kelas "no-blur" daripada kesan kabur.
Contoh 3
Berikut ialah contoh kod lengkap kaedah di atas.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.blur * {
transition: all 0.5s ease-in-out;
}
.blur:hover *:not(.no-blur) {
filter: blur(5px);
}
</style>
</head>
<body>
<h2>Creating a focus effect with blur distance in CSS</h2>
<p> Hover over the below content to see the effect </p>
<div class="blur">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button class="no-blur">Click me</button>
</div>
</body>
</html>
Kesimpulan
Menetapkan jarak kabur dalam CSS ialah cara yang mudah dan berkesan untuk menambah daya tarikan visual pada halaman web anda. Dengan contoh berikut, anda boleh mencipta kesan kabur pada halaman web dengan mudah.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan jarak kabur dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!