Իմացեք CSS3 անակնկալների մասին

Պատրաստել ձեր թիկունքները թափանցիկ

Նյութերից մեկը, որ հեշտությամբ կարող եք անել տպագիր դիզայնում, բայց ոչ Վեբ- ում, պատկերի վրա կամ գունավոր ֆոնի վրա տեքստի տեքստը փոխելն է եւ փոխել այդ պատկերը թափանցիկությունը, որպեսզի տեքստը վերածվի ֆոնի: Բայց CSS3- ում ունեցվածքը կա, որը թույլ կտա փոխել ձեր տարրերի անթափանցությունը, որպեսզի նրանք մտնեն եւ դուրս գան `անփոփոխ:

Ինչպես օգտվել անորոշության գույքից

Անթափանցիկության արժեքը վերցնում է թափանցիկության արժեքը 0.0-ից 1.0:

0.0- ը 100% թափանցիկ է, այս տարրից ներքեւ գտնվող ամեն ինչ ամբողջովին կցուցադրվի: 1.0-ը 100% անփայլ է, ոչինչ, ստորեւ տարրը կցուցադրվի:

Այսպիսով, տարրը 50% -ով թափանցիկ դնելու համար գրեք.

անթափանցիկություն `0.5;

Տեսեք գործողության անփոփոխության որոշ օրինակներ

Հավաստիացեք հին բրաուզերում փորձարկելու համար

Ոչ IE 6 կամ 7-ը չեն աջակցում CSS3 անթափանցիկ հատկությանը: Բայց դուք հաջողություն չեք ունեցել: Փոխարենը, IE- ն աջակցում է Microsoft- ի միայն գույքի ալֆա ֆիլտրին: IE- ի ալֆա ֆիլտրները ընդունում են արժեքներ 0-ից (ամբողջովին թափանցիկ) մինչեւ 100 (ամբողջովին opak): Այսպիսով, IE- ում ձեր թափանցիկությունը ստանալու համար դուք պետք է բազմապատկեք ձեր անթափանցիկությունը 100-ը եւ ավելացնեք ալֆա զտիչ ձեր ոճերի համար:

ֆիլտր: ալֆա (opacity = 50);

Տեսեք ալֆա ֆիլտրը գործողության մեջ (միայն IE)

Եւ օգտվեք Browser նախածանցներից

Դուք պետք է օգտագործեք -moz- եւ -webkit-prefixes- ը, որպեսզի Mozilla- ի եւ Webkit բրաուզերների հին տարբերակներն էլ այն աջակցեն:

- վեբկիտ-անթափանցիկություն. 0.5;
-մազ-անփոփոխություն. 0.5;
անթափանցիկություն `0.5;

Նախ միշտ դիտարկիչի նախածանցները տեղադրեք, իսկ վերջին վավեր CSS3 հատկությունը:

Փորձեք բրաուզերի նախածանցերը հին Mozilla եւ Webkit բրաուզերներում:

Դուք կարող եք նկարներ թափանցիկ դարձնել

Սահմանեք անթափանցիկությունը պատկերի վրա եւ այն կկանգնի ֆոնի վրա: Սա իսկապես օգտակար է ֆոնային պատկերների համար :

Եվ եթե խարիսխի մեջ ավելացնելը, կարող եք ստեղծել սավառնելի ազդեցություն , ուղղելով պատկերի անթափանցիկությունը:

a: hover img {
ֆիլտր: ալֆա (opacity = 50)
ֆիլտր: նախորդ: DXImageTransform.Microsoft.Alpha (opacity = 50)
-մազ-անփոփոխություն. 0.5;
- վեբկիտ-անթափանցիկություն. 0.5;
անթափանցիկություն `0.5;
}

Կազդի այս HTML- ին:

Փորձեք վերը նշված ոճերը եւ HTML- ը գործողության մեջ:

Ներդրեք տեքստ ձեր պատկերների վրա

Անթափանցիկությամբ դուք կարող եք տեքստային տեքստի վրա պատկերացնել եւ պատկերն առաջ է մղվել, որտեղ այդ տեքստն է:

Այս տեխնիկան մի փոքր բարդ է, քանի որ դուք չեք կարող պարզապես մղել պատկերը, քանի որ այն կթափի ամբողջ պատկերը: Եվ դուք չեք կարող մարել տեքստային տուփը , քանի որ տեքստը կթափվի նաեւ այնտեղ:

1. Նախ `ստեղծել DIV կոնտեյներ եւ տեղադրել ձեր պատկերի ներսում:

   
   

2. Հետեւեք պատկերի դատարկ DIV- ի հետ `այն, ինչ դուք կստեղծեք թափանցիկ:

   
   
   

3. Ձեր HTML- ում ավելացրած վերջին բանը DIV- ն է ձեր տեքստում:

   
   
   
   Սա իմ շանն է, Շաստա: Միթե նա գեղեցիկ չէ:

4. Դրանում եք այն CSS դիրքերում, տեքստը վերեւում տեղադրելու համար: Ես տեղադրել եմ իմ տեքստը ձախ կողմում, բայց դուք կարող եք տեղադրել այն աջ կողմում, փոխելով երկու ձախ: 0; հատկությունները `0; .

   #image {
   պաշտոնը `հարաբերական;
   լայնությունը `170px;
   բարձրությունը `128px;
   margin: 0;
   }
   # տեքստ {
   պաշտոնը `բացարձակ;
   վերեւ: 0;
   ձախ `0;
   լայնությունը `60px;
   բարձրությունը `118px;
   background: #fff;
   padding: 5px;
   }
   # տեքստ {
   ֆիլտր: ալֆա (opacity = 70);
   ֆիլտր: նախորդ: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -մազ-անփոփոխություն. 0.70;
   անթափանցիկություն `0.7;
   }
   #words {
   պաշտոնը `բացարձակ;
   վերեւ: 0;
   ձախ `0;
   լայնությունը `60px;
   բարձրությունը `118px;
   ֆոնային: թափանցիկ;
   padding: 5px;
   }

Տեսեք, թե ինչպես է այն նայում