Bagaimana untuk menetapkan ketelusan dan kelegapan dalam CSS

CSS ialah bahasa helaian gaya yang digunakan secara meluas, terutamanya digunakan untuk menambah gaya pada fail seperti HTML, XHTML dan XML. Dalam CSS, ketelusan mengawal kelegapan elemen untuk mencipta kesan visual dengan menukar warna dan menggabungkan elemen. Dalam artikel ini, kita akan membincangkan cara menggunakan ketelusan dan kelegapan dalam CSS.

Ketelusan

Ketelusan ialah tahap kelegapan atau keterlihatan sesuatu elemen. Sifat ini ditetapkan oleh "opacity" dalam CSS dan berjulat daripada nombor antara 0 dan 1. Unsur dengan ketelusan 0 akan menjadi halimunan, manakala ketelusan 1 akan menjadikan elemen itu legap sepenuhnya. Selain itu, anda boleh menggunakan nilai perpuluhan, seperti 0.5, untuk mendapatkan tahap ketelusan antara telus sepenuhnya dan legap sepenuhnya. Berikut ialah contoh:

div {
    opacity: 0.5;
}

Dalam contoh ini, elemen "div" hanya akan dilihat dalam keadaan separa lutsinarnya, iaitu 50% kelegapan.

Contoh aplikasi ketelusan:

• Tukar warna pepejal kepada warna lut sinar untuk meningkatkan reka bentuk UI. Semasa proses reka bentuk, anda boleh menggunakan warna lut sinar untuk meningkatkan kontras antara unsur dan menjadikannya lebih mudah dibaca.
• Digunakan untuk imej latar belakang tapak web dan penukaran ketelusan video. Apabila terdapat keperluan untuk membuat peralihan antara latar belakang dan kandungan, ini boleh dicapai dengan mudah dengan menggunakan ketelusan dengan imej dan video latar belakang tapak web.
• Digunakan untuk menu navigasi tapak web. Gunakan ketelusan untuk mencipta kesan menu yang cantik Anda boleh menjadikan latar belakang menu telus supaya lebih banyak kandungan dapat dilihat dengan latar belakang elemen lain pada halaman.

Kelegapan

Kelegapan adalah bertentangan dengan ketelusan. Kelegapan mentakrifkan keadaan legap sepenuhnya bagi sesuatu unsur. Dalam CSS, menggunakan fungsi "rgba" atau "hsla" menetapkan kelegapan dan membolehkan pengguna menetapkan gabungan warna dan nilai ketelusan. Kelegapan dua elemen boleh digabungkan untuk mencipta warna baharu yang merupakan kedua-dua warna gabungan elemen campuran sambil mengekalkan kecerahan dan kontras asal. Berikut ialah contoh menggunakan "rgba" dan "hsla":

div {
    background-color: rgba(255, 255, 255, 0.5);
    background-color: hsla(0, 0%, 100%, 0.5);
}

Dalam contoh ini, warna latar belakang ditetapkan kepada 50% kelegapan. Ini bermakna warna latar belakang bercampur dengan elemen lain pada halaman untuk menghasilkan warna baharu.

Contoh aplikasi kelegapan:

• Warna latar belakang ditetapkan kepada legap sepenuhnya untuk mencapai kesan visual yang berbeza. Contohnya, dalam reka bentuk, anda boleh menggunakan kelegapan untuk mengurangkan kecerahan imej latar belakang supaya ia lebih sesuai dengan elemen lain.
• Sampul untuk elemen reka bentuk UI seperti kad. Dengan menetapkan penutup kepada legap sepenuhnya, anda boleh menjadikan elemen UI seperti kad kelihatan lebih jelas, sambil turut menghalang bahagian yang tidak bertutup daripada kelihatan di bawah elemen lain.
• Buat kotak teks lutsinar, membenarkan elemen latar belakang menembusi. Apabila anda perlu menambah kotak teks dan juga perlu membenarkan elemen pada halaman menembusinya, anda boleh menetapkan kelegapan kotak teks kepada 0 untuk membolehkan elemen latar belakang menembusi.

Ringkasan

Ketelusan dan kelegapan ialah kedua-dua ciri hebat dalam CSS. Dalam reka bentuk UI, menggunakan ciri ini boleh mencipta perubahan warna berterusan dan kesan kontras dengan mudah, di samping meningkatkan keterlihatan kandungan halaman dalam beberapa kes. Tidak kira di mana anda menggunakan ketelusan dan kelegapan, adalah penting untuk memahami prinsip asasnya.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan ketelusan dan kelegapan dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!