Mësoni Rreth Opacity CSS3

Marrja e sfondeve tuaja transparente

Një nga gjërat që ju lehtë mund të bëni në dizajnin e printimit, por jo në Web, është teksti i mbivendosjes në një imazh ose sfond me ngjyrë dhe ndryshoni transparencën e atij imazhi në mënyrë që teksti të zbehet në sfond. Por ka një pronë në CSS3 që do t'ju lejojë të ndryshoni perde e elementëve tuaj në mënyrë që ata të zbehet brenda dhe jashtë: perde.

Si të përdorni pronën e errësirës

Pronësia e errësirës merr një vlerë të sasisë së transparencës nga 0.0 në 1.0.

0.0 është 100% transparent - asgjë më poshtë se elementi do të tregojë plotësisht përmes. 1.0 është 100% i errët-asgjë nën elementin do të tregojë përmes.

Pra, për të vendosur një element në 50% transparent, do të shkruanit:

perde: 0.5;

Shihni disa shembuj të errësirës në veprim

Jetë i sigurt për të testuar në shfletuesit e vjetër

As IE 6 as 7 nuk mbështesin pasurinë e errësirës CSS3. Por ju nuk jeni nga fat. Përkundrazi, IE mbështet një filtër alfa të pronës vetëm për Microsoft. Filtrat alfa në IE pranojnë vlera nga 0 (plotësisht transparente) deri në 100 (plotësisht i errët). Pra, për të marrë transparencën në IE, ju duhet ta shumëzoni opacitetin tuaj me 100 dhe të shtoni një filtër alfa në stilet tuaja:

filtri: alfa (perde = 50);

Shiko filtrin alfa në veprim (vetëm IE)

Përdorni prefiksin e shfletuesit

Ju duhet të përdorni prefikset -moz- dhe -webkit kështu që versionet e vjetra të shfletuesve të Mozilla dhe Webkit ta mbështesin gjithashtu:

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

Gjithmonë vendosni prefikset e shfletuesit së pari, dhe prona e vlefshme CSS3 zgjat.

Testoni prefikset e shfletuesit në shfletuesit e vjetër Mozilla dhe Webkit.

Ju mund të bëni edhe imazhe të tejdukshme

Vendosni perde në vetë imazhin dhe do të zbehet në sfond. Kjo është me të vërtetë e dobishme për imazhet e sfondit .

Dhe nëse ju shtoni në një tag ankorimi ju mund të krijoni efekte pezull vetëm duke ndryshuar perde e imazhit.

a: hover img {
filtri: alfa (perde = 50)
filtri: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-perde: 0.5;
-webkit-opacity: 0.5;
perde: 0.5;
}

Ndikon në këtë HTML:

Testoni stilet e mësipërme dhe HTML në veprim.

Vendoseni tekstin në imazhet tuaja

Me perde, mund të vendosni tekst mbi një imazh dhe të duket sikur imazhi të zhduket se ku është teksti.

Kjo teknikë është pak e ndërlikuar, sepse nuk mund të zbehet imazhi, pasi që do të zbehet imazhi i tërë. Dhe nuk mund të zbehet kutia e tekstit , sepse teksti do të zhduket po ashtu.

1. Së pari ju krijoni një enë DIV dhe vendosni imazhin tuaj brenda:

   
   

2. Ndiqni imazhin me një DIV bosh - kjo është ajo që ju do të bëni transparente.

   
   
   

3. Gjëja e fundit që shtoni në HTML është DIV me tekstin tuaj në të:

   
   
   
   Ky është qeni im Shasta. A nuk është ai i bukur?

4. Ju e stiloni atë me vendosjen e CSS, për të vendosur tekstin mbi imazhin. E vendos tekstin tim në anën e majtë, por mund ta vendosësh në të djathtë duke ndryshuar dy të mbeturat: 0; pronat në të djathtë: 0; .

   # imazh {
   pozicion: relative;
   gjerësia: 170px;
   height: 128px;
   diferencë: 0;
   }
   #text {
   pozicion: absolute;
   lart: 0;
   majtas: 0;
   gjerësi: 60px;
   height: 118px;
   background: #fff;
   mbushje: 5px;
   }
   #text {
   filtri: alfa (perde = 70);
   filtri: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-perde: 0.70;
   perde: 0.7;
   }
   #words {
   pozicion: absolute;
   lart: 0;
   majtas: 0;
   gjerësi: 60px;
   height: 118px;
   background: transparent;
   mbushje: 5px;
   }

Shihni se si duket