Lugege CSS3 läbipaistmatusest

Teie taustapildid on läbipaistvad

Üks asi, mida saate hõlpsasti teha printimisdisainil, kuid mitte veebis, on kujutise või värvilise taustaga ülekatte tekst ja selle kujutise läbipaistvuse muutmine nii, et tekst kaob taustale. Kuid CSS3- is on omadus, mis võimaldab teil muuta oma elementide läbipaistmatust, nii et need muutuvad sisse ja välja: läbipaistmatus.

Kuidas kasutada läbipaistmatusomandit

Läbipaistmatuse omadus võtab läbipaistvuse väärtuse väärtuseni 0,0 kuni 1,0.

0.0 on 100% läbipaistev - kõik selle elemendi all kuvatakse täielikult. 1.0 on 100% läbipaistmatu, element näitab allpool elementi.

Nii et elemendi seadistamine 50% läbipaistvaks, kirjutad:

läbipaistmatus: 0,5;

Vaadake näiteid tegevuse läbipaistmatusest

Kindlasti proovige vanemates brauserites

Ei IE 6 ega 7 ei toeta CSS3 läbipaistmatusomadust. Aga sa ei ole õnne. Selle asemel toetab IE ainult Microsofti vara alfafiltrit. IE alfa-filtrid aktsepteerivad väärtusi alates 0 (täiesti läbipaistvast) kuni 100 (täiesti läbipaistmatu). Nii et IE-i läbipaistvuse suurendamiseks peate oma suitsususe korrutama 100-ga ja lisama oma stiile alfa-filtri:

filter: alfa (suitsusus = 50);

Vaadake alfa-filtrit tegevuses (ainult IE)

Ja kasutage brauseri eesliiteid

Peate kasutama -moz- ja -webkit-eesliite, nii et ka Mozilla ja Webkiti brauserite vanemad versioonid seda toetaksid:

-webkit-läbipaistmatus: 0,5;
-moz-läbipaistmatus: 0,5;
läbipaistmatus: 0,5;

Kõigepealt asetage brauseri prefiksid ja kehtiv CSS3 vara viimane.

Katsetage brauseri prefiksid vanemates Mozilla ja Webkiti brauserites.

Saate teha pilte ka läbipaistvaks

Määrake kujutisega läbipaistmatus ja see läheb taustale. See on tõepoolest kasulik taustpildi jaoks .

Kui lisate ankru märgendisse, saate luua hõljukite mõju , muutes lihtsalt pildi läbipaistmatust.

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

Mõjutab seda HTML-i:

Katsetage ülaltoodud stiilid ja HTML toimingutes.

Pane teksti oma piltidele

Hermeetilisuse korral võite paigutada teksti üle pildi ja pilt paistab olevat selle teksti väljalangemine.

See meetod on natuke keeruline, sest te ei saa lihtsalt pilti tuhmuda, sest see kaob kogu pildi. Ja te ei saa tekstikasti tuhmida , sest tekst ka sinna kaob.

1. Esmalt loote konteineri DIV ja asetage oma pilt sees:

   
   

2. Järgige pilti tühja DIV-ga - see on see, mida teete läbipaistvaks.

   
   
   

3. Viimane asi, mida oma HTML-i lisate, on DIV koos oma tekstiga:

   
   
   
   See on mu koer Shasta. Kas pole ta armas!

4. Teil on stiil CSS-i positsioneerimiseks, et asetada tekst pildi kohal. Ma panin oma teksti vasakul küljel, aga võite panna selle paremale, muutes kaks vasakut: 0; omadused paremale: 0; .

   #image {
   asukoht: suhteline;
   laius: 170px;
   kõrgus: 128px;
   marginaal: 0;
   }
   #text {
   ametikoht: absoluutne;
   top: 0;
   vasakule: 0;
   laius: 60px;
   kõrgus: 118 pikslit;
   taust: #fff;
   padding: 5px;
   }
   #text {
   filter: alfa (läbipaistmatus = 70);
   filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-läbipaistmatus: 0,70;
   läbipaistmatus: 0,7;
   }
   #words {
   ametikoht: absoluutne;
   top: 0;
   vasakule: 0;
   laius: 60px;
   kõrgus: 118 pikslit;
   taust: läbipaistev;
   padding: 5px;
   }

Vaadake, kuidas see välja näeb