Diajar Ngeunaan CSS3 Opacity

Nyieun backgrounds anjeun transparan

Salah sahiji hal anu anjeun bisa kalayan gampang ngalakukeun dina rarancang print tapi teu on Web teh nyaeta téks overlay on hiji gambar atawa tukang warna, jeung Ngarobih transparansi gambar nu kitu nu téks fades kana tukang. Tapi aya sipat di CSS3 nu bakal ngidinan Anjeun pikeun ngarobah opacity sahiji elemen anjeun ambéh maranéhanana diudar asup jeung kaluar: opacity.

Kumaha Pake Opacity Harta

Harta opacity nyokot nilai tina jumlah transparansi ti 0,0 nepi 1.0.

0,0 nyaéta 100% transparan-nanaon handap unsur anu bakal némbongkeun lengkep ngaliwatan. 1.0 nyaeta 100% opak-nanaon handap unsur bakal némbongkeun liwat.

Ku kituna pikeun ngeset unsur ka 50% transparan, anjeun bakal nulis:

opacity: 0,5;

Tempo sababaraha conto opacity dina peta

Janten Yakin pikeun nguji dina heubeul panyungsi

Ngayakeun IE 6 atawa 7 rojongan harta CSS3 opacity. Tapi anjeun teu kaluar tina tuah. Gantina, IE ngarojong hiji Microsoft-hijina harta alfa filter. saringan alfa di IE nampa nilai tina 0 (lengkep transparan) kana 100 (lengkep opak). Ku kituna, nepi ka meunang transparansi anjeun dina IE, Anjeun kudu ngalikeun opacity anjeun ku 100 tur nambahkeun hiji filter alfa pikeun gaya anjeun:

filter: alfa (opacity = 50);

Ningali filter alfa di aksi (IE wungkul)

Sarta Paké Browser émbohan

Anjeun kedah nganggo émbohan -moz- na -webkit- ambéh versi heubeul tina Mozilla jeung Webkit panyungsi ngarojong eta teuing:

-webkit-opacity: 0,5;
-moz-opacity: 0,5;
opacity: 0,5;

Salawasna nempatkeun awalanna browser kahiji, sarta harta CSS3 valid panungtungan.

Nguji awalanna browser dina heubeul Mozilla jeung Webkit panyungsi.

Anjeun tiasa Jieun Gambar transparan teuing

Nyetél opacity dina gambar sorangan jeung bakal diudar kana tukang. Ieu bener mangpaat keur gambar tukang .

Tur upami Anjeun salah nambahkeun dina tag jangkar Anjeun bisa nyieun épék hover ngan ku ngarobah opacity gambar.

a: IMG hover {
filter: alfa (opacity = 50)
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0,5;
-webkit-opacity: 0,5;
opacity: 0,5;
}

Mangaruhan HTML ieu:

Nguji gaya luhur sarta HTML dina peta.

Nempatkeun téks dina Gambar anjeun

Kalawan opacity, anjeun tiasa nempatkeun téks leuwih hiji gambar na gaduh gambar kaciri diudar dimana téks nu mangrupa.

Téhnik ieu mangrupakeun saeutik tricky, sabab teu bisa ngan saukur diudar gambar, sakumaha anu bakal diudar sakabéh gambar. Anjeun moal bisa diudar kotak téks , sabab tulisan bakal diudar aya ogé.

1. Mimiti Anjeun nyieun hiji DIV wadahna sarta nempatkeun gambar anjeun jero:

   
   

2. Turutan gambar kalawan -this DIV kosong téh naon gé anjeun nyieun transparan.

   
   
   

3. Hal panungtungan anjeun tambahkeun dina HTML anjeun teh DIV kalayan téks anjeun dina eta:

   
   
   
   Ieu dog abdi Shasta. Teu anjeunna lucu!

4. Anjeun gaya eta kalawan positioning CSS, pikeun nempatkeun téks di luhur gambar. Kuring ditempatkeun téks abdi di sisi kénca, tapi anjeun bisa nyimpen deui di sisi katuhu ku cara ngarobah kana dua kénca: 0; Sipat ka katuhu: 0; .

   #image {
   posisi: relatif;
   lebar: 170px;
   jangkungna: 128px;
   margin: 0;
   }
   #text {
   posisi: absolut;
   luhur: 0;
   kénca: 0;
   lebar: 60px;
   jangkungna: 118px;
   latar: #fff;
   padding: 5px;
   }
   #text {
   filter: alfa (opacity = 70);
   filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0,70;
   opacity: 0,7;
   }
   #words {
   posisi: absolut;
   luhur: 0;
   kénca: 0;
   lebar: 60px;
   jangkungna: 118px;
   latar: transparan;
   padding: 5px;
   }

Tempo kumaha eta Sigana