Lernu pri CSS3 Malbeleco

Farante Viaj Fonoj Travidebla

Unu el la aferoj, kiujn vi povas facile fari en presa dezajno sed ne en la TTT, tegu tekston sur bildo aŭ kolora fono, kaj ŝanĝi la travideblecon de tiu bildo por ke la teksto malŝaltas en la fono. Sed ekzistas proprieto en CSS3, kiu permesos al vi ŝanĝi la opakecon de viaj elementoj por ke ili malleviĝu kaj eksteren: opakeco.

Kiel Uzi la Malpeza Proprieto

La opakeco posedas valoron de la kvanto de travidebleco de 0,0 ĝis 1.0.

0.0 estas 100% travidebla-io ajn sub tiu elemento montros tute tra. 1.0 estas 100% opaka-nenio sub la elemento montros per.

Do por agordi elementon al 50% travidebla, vi skribus:

opakeco: 0.5;

Vidu iujn ekzemplojn de opakeco en ago

Estu certe provi en malnovaj foliumiloj

Nek IE 6 nek 7 subtenas la CSS3-opakecon. Sed vi ne estas sen sorto. Anstataŭe, IE subtenas Microsoft-nura posedaĵo alfa filtrilo. Alfa filtriloj en IE akceptas valorojn de 0 (tute travideblaj) ĝis 100 (tute opaka). Do, por akiri vian travideblecon en IE, vi devas multobligi vian opakecon laŭ 100 kaj aldonu alfa filtrilon al viaj stiloj:

filtrilo: alfa (opakeco = 50);

Vidu la alfa filtrilon en ago (IE nur)

Kaj Uzu retumilojn

Vi devas uzi la prefiksojn -moz- kaj -webkit- tiel ke pli malnovaj versioj de Mozilla kaj Webkit-retumiloj ankaŭ subtenas ĝin:

-speco-opakeco: 0.5;
-moz-opakeco: 0.5;
opakeco: 0.5;

Ĉiam metu la retikikajn prefiksojn unue, kaj la valida CSS3-posedaĵo daŭras.

Provu la retumikajn prefiksojn en malnovaj retumiloj de Mozilla kaj Webkit.

Vi Povas Fari Bildojn Travidebla Tro

Metu la opakecon sur la bildon mem kaj ĝi falos en la fonon. Ĉi tio vere utilas por fono bildoj .

Kaj se vi aldonas ankron etikedo, vi povas krei ŝvebajn efikojn nur ŝanĝante la opakecon de la bildo.

a: ŝvebi img {
filtrilo: alfa (opakeco = 50)
filtrilo: progid: DXImageTransform.Microsoft.Alpha (opakeco = 50)
-moz-opakeco: 0.5;
-speco-opakeco: 0.5;
opakeco: 0.5;
}

Afekcias ĉi HTML:

Provu la suprajn stilojn kaj HTML en agado.

Metu Tekston sur Viaj Bildoj

Kun opakeco, vi povas meti tekston super bildo kaj havi la bildon ŝajnas malplenigi kie tiu teksto estas.

Ĉi tiu tekniko estas iom malfacila, ĉar vi ne povas simple malplenigi la bildon, ĉar tio malplenigos la tutan bildon. Kaj vi ne povas malplenigi la tekston , ĉar la teksto ankaŭ malkreskos tie.

1. Unue vi kreas ujon DIV kaj metu vian bildon enen:

   
   

2. Sekvu la bildon per malplena DIV-tio estas, kion vi faros travidebla.

   
   
   

3. La lasta afero, kiun vi aldonas en via HTML, estas la DIV kun via teksto en ĝi:

   
   
   
   Ĉi tiu estas mia hundo Shasta. Ĉu li ne estas bela!

4. Vi stiligas ĝin per CSS-pozicio, por meti la tekston super la bildo. Mi metis mian tekston sur la maldekstra flanko, sed vi povas meti ĝin dekstre per ŝanĝado de la du maldekstraj: 0; proprietoj dekstre: 0; .

   #image {
   pozicio: relativa;
   larĝa: 170px;
   alteco: 128px;
   rando: 0;
   }
   #text {
   pozicio: absoluta;
   supro: 0;
   maldekstra: 0;
   larĝa: 60px;
   alteco: 118px;
   fono: #fff;
   kompletigo: 5px;
   }
   #text {
   filtrilo: alfa (opakeco = 70);
   filtrilo: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opakeco: 0.70;
   opakeco: 0.7;
   }
   #vortoj {
   pozicio: absoluta;
   supro: 0;
   maldekstra: 0;
   larĝa: 60px;
   alteco: 118px;
   fono: travidebla;
   kompletigo: 5px;
   }

Vidu kiel ĝi aspektas