Bagaimana untuk membuat div legap dengan css

Dalam reka bentuk web, ketelusan ialah kesan yang sangat berguna, yang boleh membantu anda mencipta pelbagai kesan visual yang berbeza. Dalam CSS, menetapkan ketelusan elemen boleh dicapai melalui sifat kelegapan. Tetapi bagaimana jika anda hanya mahu latar belakang elemen menjadi telus tanpa menjejaskan kandungan dalamannya?

Pada masa ini, kita boleh menggunakan mod warna rgba (merah, hijau, biru, alfa) dalam CSS3 untuk mengawal kelegapan elemen.

Kaedah pelaksanaan khusus ialah menggunakan nilai warna rgba dalam helaian gaya CSS dan bukannya nilai rgb biasa.

Nilai warna rgba terdiri daripada nilai ketelusan merah, hijau, biru dan alfa Nilai ketelusan berjulat dari 0 hingga 1. Apabila nilai alfa ialah 0, unsur itu telus sepenuhnya apabila nilai alfa ialah 1, unsur itu legap sepenuhnya.

Di sini kita lihat contoh:

div {
    background-color: rgba(0, 0, 0, 0.5);
}

Kod gaya ini akan menukar warna latar belakang elemen div kepada hitam lut sinar. rgba(0, 0, 0, 0.5) bermaksud bahawa tiga nilai warna merah, hijau dan biru ialah 0, yang bermaksud hitam, dan ketelusan 0.5 bermaksud lut sinar.

Sekarang, mari kita lihat cara melaksanakan kandungan legap dalam elemen div.

Kaedah pelaksanaan:

1. Tetapkan atribut background-color kepada warna separa lutsinar. Contohnya:

div {
    background-color: rgba(255, 255, 255, 0.5);
}

Ini akan menjadikan warna latar belakang elemen div menjadi putih lut sinar.

2. Tetapkan atribut opacity kepada 1 untuk mengalih keluar kelegapan warna latar belakang. Contohnya:

div {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

Dalam kod gaya ini, kami menetapkan atribut opacity kepada 1, mengalih keluar ketelusan warna latar belakang. Dengan cara ini, teks elemen div menjadi legap, manakala warna latar belakang kekal lut sinar.

Perhatikan bahawa pendekatan ini tidak menjadikan elemen lain dalam elemen div (seperti imej atau elemen div anak bersarang) legap. Jika anda ingin menjadikan semua elemen legap, anda perlu menggunakan atribut opacity pada elemen tersebut juga.

Ringkasnya, dengan menggunakan mod warna rgba CSS3 dan sifat kelegapan, kami boleh dengan mudah menetapkan kelegapan elemen dan mencapai kesan visual yang kompleks.

Atas ialah kandungan terperinci Bagaimana untuk membuat div legap dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!