Katrangan About CSS3 Opacity

Nggawe latar mburi Transparan

Salah sijine sing bisa gampang dilakoni ing desain cetak nanging ora ana ing Web minangka teks sing numpuk ing gambar utawa latar mburi warna, lan ngganti transparansi gambar kasebut supaya tekstur dadi latar. Nanging ana properti ing CSS3 sing bakal ngidini sampeyan ngganti opacity saka unsur supaya padha fade lan metu: opacity.

Carane Gunakake Property Opacity

Properti opacity njupuk nilai jembar saka 0,0 kanggo 1,0.

0.0 100% transparent apa-apa ing ngisor iki unsur bakal nuduhake liwat. 1.0 is 100% opaque-nothing below element will show through.

Dadi kanggo nyetel unsur dadi 50% transparan, sampeyan bakal nulis:

opacity: 0.5;

Waca sawetara conto opacity ing tumindak

Mesthi kanggo nguji ing Browser lawas

Ora ana IE 6 utawa 7 ndhukung properti opacity CSS3. Nanging sampeyan ora metu saka luck. Nanging, IE ndhukung panyaring alpha property mung-mung kanggo Microsoft. Filter-filter Alpha ing IE nampa nilai-nilai 0 (rampung transparan) kanggo 100 (lengkap opaque). Dadi, kanggo njaluk transparansi ing IE, sampeyan kudu nambah opacity kanthi 100 lan nambah panyaring alfa menyang gaya sampeyan:

saringan: alpha (opacity = 50);

Deleng panyimpenan alpha ing tumindak (IE mung)

Lan Gunakake Panyelenggo Browser

Sampeyan kudu nggunakake prefix -moz- lan -webkit supaya versi versi Mozilla lan Webkit lawas ndhukung banget:

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;

Tansah ngrayakake awalan browser dhisik, lan properti CSS3 sing bener pungkasan.

Coba prefixes browser ing browser Mozilla lan Webkit lawas.

Sampeyan Bisa Nggawe Gambar Transparan Terlalu

Setel opacity ing gambar kasebut dhewe lan bakal mandheg ing latar mburi. Iki pancene migunani kanggo gambar latar mburi .

Lan yen sampeyan nambahake tag anchor sampeyan bisa nggawe efek hover mung kanthi ngganti opacity gambar.

a: hover img {
saring: alpha (opacity = 50)
Filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
opacity: 0.5;
}

Ndhuwuhi HTML iki:

Nguji gaya ndhuwur lan HTML ing tumindak.

Sunting Teks ing Gambar Panjenengan

Kanthi opacity, sampeyan bisa nulis teks liwat gambar lan nduwe citra katon fade metu teks kasebut.

Teknik iki arang angel, amarga sampeyan ora bisa mung ngowahi gambar, amarga bisa ngowahi kabeh gambar. Lan sampeyan ora bisa mungkasi kothak teks , amarga teks bakal mandheg ana uga.

1. Pisanan sampeyan nggawe DIV wadhah lan nyelehake gambar nang:

   
   

2. Tindakake gambar karo DIV kosong - iki apa sing bakal nggawe transparan.

   
   
   

3. Perkara pungkasan sing sampeyan tambah ing HTML iku DIV karo teks ing:

   
   
   
   Iki aku asu Shasta. Dheweke ora seneng banget!

4. Sampeyan gaya nganggo posisi CSS, kanggo nyelehake teks ing ndhuwur gambar. Aku nyelehake teks ing sisih kiwa, nanging sampeyan bisa nempel ing sisih tengen kanthi ngowahi loro kiwa: 0; sifat menyang tengen: 0; .

   #image {
   posisi: relatif;
   ambane: 170px;
   dhuwur: 128px;
   margin: 0;
   }
   #text {
   posisi: Absolute;
   ndhuwur: 0;
   kiwa: 0;
   ambane: 60px;
   dhuwur: 118px;
   latar mburi: #fff;
   padding: 5px;
   }
   #text {
   saringan: alpha (opacity = 70);
   Filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   opacity: 0.7;
   }
   # keywords {
   posisi: Absolute;
   ndhuwur: 0;
   kiwa: 0;
   ambane: 60px;
   dhuwur: 118px;
   latar mburi: transparent;
   padding: 5px;
   }

Waca carane katon