Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai paparan kecerahan rendah dalam css3
Anda boleh menggunakan atribut penapis dan fungsi kecerahan() dalam css untuk mencapai paparan kecerahan rendah Atribut penapis digunakan untuk mentakrifkan kesan visual elemen gambar Gunakannya dengan fungsi brightness(). tetapkan gaya terang dan gelap elemen Sintaks "elemen" {filter:brightness(lightness and darkness value)}".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara mencapai kecerahan rendah dalam css3
Dalam css, jika anda ingin mencapai kecerahan rendah, anda boleh menggunakan atribut penapis. Atribut
penapis mentakrifkan kesan visual (seperti kabur dan tepu) elemen (biasanya ).
Fungsi brightness() menggunakan pendaraban linear pada imej, menjadikannya kelihatan lebih cerah atau lebih gelap. Jika nilainya ialah 0%, imej akan menjadi hitam sepenuhnya. Jika nilainya 100%, tidak akan ada perubahan pada imej. Nilai lain sepadan dengan kesan pengganda linear. Nilai di atas 100% adalah baik dan imej akan menjadi lebih cerah daripada sebelumnya. Jika tiada nilai ditetapkan, lalai ialah 1.
Contohnya adalah seperti berikut:
<html>
<head>
<style>
.img1{
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}
</style>
</head>
<body>
<p>左面低亮度，右面原亮度:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%" class="img1">
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
</body>
</html>Hasil output: 
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk mencapai paparan kecerahan rendah dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!