Transparansi warna dapat diatur melalui rgba() dan hsla(), tetapi keduanya hanya dapat mengatur transparansi saat menentukan warna, dan tidak dapat mengatur transparansi untuk gambar atau elemen lainnya.
Dua cara mengatur transparansi dengan CSS:
1. CSS rgba() menyetel transparansi warna
tata bahasa:
rgba(R,G,B,A);
RGBA merupakan singkatan dari tiga kata Red (merah), Green (hijau), Blue (biru), dan Alpha (opacity). Nilai warna RGBA merupakan perpanjangan dari nilai warna RGB, dengan saluran alfa - yang menentukan opacity objek.
Pengenalan nilai-nilai dalam rgba():
R: nilai merah. Bilangan bulat positif (0~255)
G: nilai hijau. Bilangan bulat positif (0~255)
B: nilai biru. Bilangan bulat positif (0~255)
J: Transparansi. Nilainya antara 0~1
rgba() dapat dengan mudah mengatur transparansi warna, yang memiliki banyak penerapan dalam tata letak halaman. Misalnya: membuat latar belakang transparan, tetapi teks di atas buram.
Contoh:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>pemrograman dotcpp</title><style>.demo{width:350px;height:300px;margin:50pxauto;}.demo*{width :120px;height:120px;margin:10px;float:left;}.demo1{background:rgba(255,0,0,1);}.demo2{background:rgba(255,0,0,0.5);} </style></head><body><divclass=demo><divclass=demo1>Warna latar belakangnya buram dan teksnya buram! </div><divclass=demo2>Warna latar belakangnya semi-transparan dan teksnya buram! </div></div></tubuh></html>Hasil berjalan:
Pada contoh di atas, nilai warna yang ditetapkan sama, namun transparansinya berbeda.
2. Atribut opacity CSS mengatur transparansi latar belakang
tata bahasa:
opacity:nilai;
value: Menentukan opacity, dari 0,0 (sepenuhnya transparan) hingga 1,0 (sepenuhnya buram).
Atribut opacity diwarisi dan akan membuat semua elemen dalam wadah menjadi transparan;
Contoh:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>atribut opacity</title><style>.demo{width:280px;height:140px;margin:50pxauto;}.demo1,.demo2 {width:120px;height:120px;margin:10px;float:left;background:#2DC4CB;}.demo1{opacity:1;}.demo2{opacity:0.5;}</style></head><body> <divclass=demo><divclass=demo1><p>Warna latar belakangnya buram dan teksnya buram! </p></div><divclass=demo2><p>Warna latar belakangnya transparan dan teksnya juga transparan! </p></div></div></tubuh></html>Hasil berjalan:
Opacity:0.5; membuat semua elemen wadah demo2 tembus cahaya.
Ringkasan: Meskipun metode rgba() dan metode opacity dapat mencapai efek transparansi, rgba() hanya bertindak pada warna elemen atau warna latar belakangnya (elemen turunan dari elemen dengan set transparansi rgb() tidak akan mewarisinya efek transparansi); dan Opacity diwariskan, tidak hanya mempengaruhi elemen itu sendiri, tetapi juga membuat semua sub-elemen dalam elemen menjadi transparan.