Léiert iwwer CSS3 Opazitéit

Äre Backgrounds maachen Transparent

Ee vun de Saachen, déi Dir einfach am Drockdekoratioun awer net am Web benotzt, ass Text op enger Bild oder faarwegen Hannergrond iwwerleet a ännert d'Transparenz vum Bild, sou dass de Text an den Hannergrond falen. Mee et ass e Besëtz vun CSS3, dat Iech erlaabt Iech d'Opazitéit vun den Elementer ze veränneren, fir datt se verdeelen an oppassen: Opazitéit.

Wéi benotzen d'Opazitéitseigenschaft

D'Opazitéitseigenschaft e Wäert vun der Transparenz vun 0.0 bis 1,0.

0.0 ass 100% transparent - alles ënner dem Element komplett ze maachen. 1.0 ass 100% iewell opaken - näischt ënnert dem Element ze weisen.

Also fir e Element op 50% transparent ze setzen, da wier et schreiwen:

Opazitéit: 0,5;

Gitt e puer Beispiller vu Opazitéit an Handlung

Be Sure fir an Test an äeren Browseren ze testen

Weder IE 6 nach 7 ënnerstëtzen d'CSS3 Opazitéitseigenschaft. Mee Dir sidd net aus Gléck. Stéit hëlleft IE a e Microsoft-eenzegen Eegeschaften-Alpha-Filter. D'Alpha-Filter an IE akzeptéieren Wäerter vun 0 (komplett duerchsichteg) op 100 (ganz elliptesch). Also, fir Är Transparenz an IE z'ënnerhuelen, musst Dir Är Opazitéit ëm 100 erhéichen an en alpha-Filter fir Är Stilen addéieren:

Filter: Alpha (Opazitéit = 50);

Kuckt de Alpha Filter an Aktiounen (IE just)

A Verwende Browser-Präfixe

Dir sollt d'Mooss- a -Webkit- Präfixe benotzen fir datt méi al Versioune vun Mozilla a Webkit Browsers ënnerstëtzen:

-Webkit-Opazitéit: 0,5;
-moz-Opazitéit: 0,5;
Opazitéit: 0,5;

Stellt ëmmer d'Browser-Präfixe fir d'éischt an déi gülteg CSS3-Eegeschafte vir.

Préift d'Browser Präfixe bei aleren Mozilla a Webkit Browseren.

Dir kënnt Biller ganz transparent maachen

Setzt d'Opazitéit op dem Bild selwer an et fänkt zeréck an den Hannergrond. Dëst ass wierklech nëtzlech fir Backgroundbilder .

A wann Dir en an engem Verankerungstick fënns, kënnt Dir Hiewer effektiv kreéieren , andeems Dir d'Opazitéit vum Bild ännert.

a: hover img {
Filter: Alpha (Opazitéit = 50)
Filter: Progid: DXImageTransform.Microsoft.Alpha (Opazitéit = 50)
-moz-Opazitéit: 0,5;
-Webkit-Opazitéit: 0,5;
Opazitéit: 0,5;
}}

Betrëfft dëse HTML:

Probéiert dës uewegen Stiler a HTML an Handlung.

Setzt Text op Äre Biller

Mat Opazitéit kënnt Dir Text iwwer e Bild setzen an d'Bild schéngt eis ze verblassen, wou dee Text ass.

Dës Technik ass e klengen Trick, well Dir net einfach den Image verblécke kann, well dat komplett Bild gëtt. An Dir kënnt den Textkëscht net verblassen, well de Text wäert och verblenden.

1. Als éischt solle Dir en Container DIV erstellen an Äert Bild bauen an:

   
   

2. Fëllt d'Bild mat engem eidel DIV - dat ass wat Dir transparent maachen.

   
   
   

3. Déi lescht Saach Dir kënnt an Äerem HTML ass den DIV mat Ärem Text hei:

   
   
   
   Dëst ass mäi Honds Shasta. Ass et net léif!

4. Dir hutt et mat CSS opgelëscht, fir de Text méi héich wéi de Bild ze setzen. Ech hunn meng Text op der linker Säit platzéiert, awer Dir kënnt et op der riet ophuelen andeems Dir déi zwee lénks verännert: 0; Eegeschaften op d'Recht: 0; .

   #image {
   Positioun: relativ;
   Breet: 170px;
   Héicht: 128px;
   Spillraum: 0;
   }}
   #text {
   Positioun: absolut
   : 0;
   lénks: 0;
   Breet: 60px;
   Héicht: 118px;
   Hannergrond: #fff;
   Polsterei: 5px;
   }}
   #text {
   Filter: Alpha (Opazitéit = 70);
   Filter: progid: DXImageTransform.Microsoft.Alpha (Opazitéit = 70);
   -moz-Opazitéit: 0,70;
   Opazitéit: 0,7;
   }}
   #words {
   Positioun: absolut
   : 0;
   lénks: 0;
   Breet: 60px;
   Héicht: 118px;
   Hannergrond: transparent;
   Polsterei: 5px;
   }}

Kuck, wéi et ausgesäit