Bagaimana untuk mencapai paparan kecerahan rendah dalam css3-tutorial css-php.cn

Bagaimana untuk mencapai paparan kecerahan rendah dalam css3

WBOY

Lepaskan： 2021-12-15 17:36:03

asal

3213 orang telah melayarinya

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)}".

Bagaimana untuk mencapai paparan kecerahan rendah dalam css3

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 Bagaimana untuk mencapai paparan kecerahan rendah dalam css3 ).

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>

Salin selepas log masuk

Hasil output:
Bagaimana untuk mencapai paparan kecerahan rendah dalam css3

(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!