Rumah > Artikel > hujung hadapan web > Tetapkan kelegapan hanya kepada warna latar belakang, bukan kelegapan teks dalam CSS
Tetapkan kelegapan hanya kepada warna latar belakang, bukan kelegapan teks dalam CSS
- 王林ke hadapan
- 2023-09-11 20:33:051146semak imbas
Dalam CSS, kita boleh menetapkan latar belakang elemen HTML tertentu menggunakan sifat "latar belakang" CSS. Kadangkala, kita mungkin perlu mengurangkan kelegapan warna latar belakang tanpa menjejaskan kandungan elemen HTML.
Kami boleh mengurangkan kelegapan warna latar belakang dengan mengurangkan nilai pembolehubah alfa sambil memberikan nilai warna pada sifat "Warna Latar Belakang".
Tatabahasa
Pengguna boleh mengikut sintaks berikut untuk menetapkan kelegapan hanya kepada warna latar belakang dan bukan teks dalam CSS.
background: rgba(255, 0, 0, opacity); or background-color: hsla(0, 100%, 30%, opacity);
Pengguna boleh menetapkan warna latar belakang menggunakan 'rgba' atau 'hsla' di sini 'a' mewakili kelegapan alfa, yang nilainya antara 0 dan 1.
Contoh 1
Dalam contoh di bawah, kami telah mencipta elemen div HTML dan menetapkan warna latar belakang menggunakan atribut "latar belakang". Kami menggunakan nilai "rgba" untuk menetapkan warna latar belakang. Kami menetapkan warna "merah" ke latar belakang dengan kelegapan "0.1", yang pengguna boleh perhatikan dalam output.
<html>
<head>
<style>
.div {
background: rgba(255, 0, 0, 0.1);
height: 100px;
width: 500px;
}
</style>
</head>
<body>
<h3>Setting up the background opacity without affecting the content of the div element</h3>
<div class = "div">
Hello! How are you?
</div>
</body>
</html>
Contoh 2
Dalam contoh di bawah, kami menggunakan sifat CSS "warna latar belakang" untuk menetapkan latar belakang elemen div HTML. Selain itu, kami menggunakan nilai "hsla" untuk latar belakang dan nilai kelegapan alfa "0.2".
Pengguna boleh menambah atau mengurangkan nilai kelegapan antara 0 dan 1 dan melihat perubahan warna latar belakang.
<html>
<head>
<style>
.div {
background-color: hsla(0, 100%, 30%, 0.2);
height: 100px;
width: 500px;
}
</style>
</head>
<body>
<h3>Setting up the background opacity using the background-color: hsla CSS property without affecting the content of the div element </h3>
<div class = "div">
This is a content of the div element.
</div>
</body>
</html>
Contoh 3
Kami boleh memisahkan div latar belakang daripada div kandungan dan menetapkan warna latar belakang dengan kelegapan yang lebih rendah untuk elemen div.
Di sini kami mempunyai div ibu bapa. Dalam div induk kita mempunyai latar belakang dan div kandungan. Div latar belakang dan kandungan mempunyai dimensi yang sama seperti div induk. Kita boleh menetapkan atribut indeks-z bagi kedua-dua elemen div untuk memaparkan div kandungan di atas div latar belakang.
Selepas itu, kita boleh menggunakan sifat "kelegapan" CSS untuk menurunkan kelegapan hanya div latar belakang. Dengan cara ini kita boleh meletakkan div latar belakang di bawah div kandungan dan bermain dengan kelegapan div latar belakang.
<html>
<head>
<style>
#parent {
width: 500px;
height: 150px;
position: relative;
}
#content {
position: absolute;
width: 100%;
height: 100%;
color: white;
font-size: 1.2rem;
top: 0;
left: 0;
}
#background {
background: blue;
filter: alpha(opacity=30);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h3>Setting up the background opacity using the filter: alpha(opacity = value) CSS property without affecting the content of the div element </h3>
<div id = "parent">
<div id = "background"></div>
<div id = "content"> This is the content of the div element.</div>
</div>
</body>
</html>
Pengguna belajar untuk menetapkan kelegapan warna latar belakang tanpa menjejaskan kelegapan teks atau kandungan div. Pengguna boleh mengurangkan kelegapan warna apabila menggunakan nilai "rgba" atau "hsla". Jika pengguna mempunyai imej atau apa-apa lagi sebagai latar belakang, mereka boleh mencipta div yang berasingan untuk latar belakang dan kandungan serta menurunkan kelegapan div latar belakang.
Atas ialah kandungan terperinci Tetapkan kelegapan hanya kepada warna latar belakang, bukan kelegapan teks dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!