Bagaimana untuk membuat latar belakang legap dalam css

Dalam reka bentuk web, warna latar belakang atau corak latar belakang adalah elemen yang sangat penting Walau bagaimanapun, kadangkala anda mungkin mahu menjadikan warna atau corak latar belakang telus supaya elemen lain boleh ditunjukkan melalui penggunaan teknologi kelegapan latar belakang CSS.

Kaedah pelaksanaan

Terdapat banyak cara untuk melaksanakan kelegapan latar belakang CSS:

1. Gunakan nilai warna dalam format RGBA

Format RGBA Nilai warna mengandungi empat sifat: nilai merah (0-255), nilai hijau (0-255), nilai biru (0-255) dan ketelusan (0-1). Dengan menetapkan sifat ketelusan, anda boleh menjadikan warna latar belakang atau corak menjadi legap.

Contohnya:

warna latar belakang: rgba(255, 255, 255, 0.5);

Peraturan gaya ini akan menambahkan latar belakang lut sinar putih pada halaman.

2. Menggunakan atribut kelegapan

Dalam CSS3, kita boleh menggunakan atribut kelegapan untuk menetapkan ketelusan sesuatu elemen. Sifat ini menerima nilai antara 0 dan 1, dengan lalainya ialah 1, yang bermaksud kelegapan penuh. 0.5 mewakili 50% kelegapan.

Contohnya:

warna latar belakang: hitam;
kelegapan: 0.5;

Peraturan gaya ini akan menambah latar belakang separa lutsinar hitam pada halaman.

3. Gunakan sifat warna latar belakang dan imej latar belakang

Kami juga boleh menggunakan sifat warna latar belakang dan imej latar belakang pada masa yang sama untuk mencapai kelegapan latar belakang. Kaedah ini memerlukan imej diproses menjadi imej PNG lutsinar terlebih dahulu.

Contohnya:

warna latar belakang: #000;
imej latar belakang: url(images/transparent-background.png);

Peraturan gaya ini akan Tambahkan imej latar belakang separa lutsinar hitam pada halaman.

Senario Aplikasi

Kelegapan latar belakang CSS ialah teknik berkuasa yang boleh digunakan untuk mencapai pelbagai kesan.

1. Melayangkan maklumat segera

Apabila tetikus bergerak ke atas pautan atau butang, kita biasanya perlu memunculkan kotak gesaan Dalam kes ini, kita boleh menggunakan separuh -latar belakang telus.

Contohnya:

.pembungkus petua alat {

position: relative;

}

.petua alat {

position: absolute;
top: 100%;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
display: none;

}

.tooltip-wrapper:hover .tooltip {

display: block;

}

Peraturan gaya ini akan memaparkan separuh hitam apabila tetikus melayang di atas elemen .tooltip-wrapper. Kotak gesaan telus.

2. Kesan fade-in dan fade-out Carta karusel

Carta karusel ialah elemen reka bentuk web yang sangat popular Kesan fade-in dan fade-out adalah salah satu daripadanya kesan asas Anda boleh menggunakan latar belakang lutsinar dan sifat kelegapan untuk mencapai ini.

Contohnya:

.sepanduk {

position: relative;

}

.img sepanduk {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;

}

.banner img.active {

opacity: 1;

}

.banner .background {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);

}

Peraturan gaya ini akan Ia akan menambah latar belakang lut cahaya hitam pada karusel pada halaman, serta kesan pudar masuk dan pudar.

Ringkasan

Kelegapan latar belakang CSS ialah teknologi yang sangat berguna yang boleh digunakan untuk mencapai pelbagai kesan, seperti maklumat segera terapung dan kesan pudar karusel. Cuba teknik ini apabila anda perlu membuat warna latar belakang atau corak telus supaya elemen lain dapat ditunjukkan.

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