CSS-i läbipaistmatuse omadus ja pildi läbipaistmatus on selgitatud

opacityVara kontrolli, kuidas läbipaistmatu element on skaalal 0,0 1,0. Mida väiksem on väärtus, seda läbipaistvam on element.

Saate valida, millises ulatuses soovite elemendi läbipaistvaks muuta. Läbipaistvustaseme saavutamiseks peate lisama järgmise atribuudi CSS.

Täiesti läbipaistmatu

.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }

Poolläbipaistev

.class-name { opacity: 0.5; }

Täiesti läbipaistev

.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }

Teise võimalusena saate kasutada rgbaelemendi läbipaistmatuse määramiseks:

.class-name{ background-color: rgba(0, 0, 0, .5); }

See seab background-colorelemendi mustaks 50% läbipaistmatusega. Väärtuse viimane väärtus rgbaon alfa-väärtus . Alfa väärtus 1 võrdub 100% läbipaistmatusega ja 0,5 (või .5 nagu eespool) võrdub 50% läbipaistmatusega.

Kujutise läbipaistmatus ja läbipaistvus

opacityVara võimaldab teha pildi läbipaistev alandades kuidas läbipaistmatu see on.

Opacity võtab väärtuse vahemikus 0,0–1,0.

1.0 on mis tahes pildi vaikeväärtus. See on täiesti läbipaistmatu.

Näide

img { opacity: 0.3; }

Kaasa filter: alpha(opacity=x)IE8 ja varasemate versioonide jaoks. X võtab väärtuse 0-100.

img { opacity: 0.3; filter: alpha(opacity=30); }

Siin on näide ülaltoodud näites parameetritele seatud pildist.

pilt 30% läbipaistmatusega

Saate siduda opacitykoos :hoverluua dünaamiline hiir üle mõju.

Näide:

img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Koodinõela näide, et näidata läbipaistvat pilti, mis hõljutades muutub läbipaistmatuks

Vähema koodiga saate luua vastupidise efekti, kuna vaikimisi on pildi läbipaistmatus 1,0

Näide:

img:hover { opacity: 0.3; filter: alpha(opacity=30); }

Siin on koodnõela näide, et näidata hiirekursori läbipaistvust.

Lisateave CSS-i kohta

Kaskaadiga stiililehed (CSS)

CSS on lühend kaskaadstiililehtedest. See leiutati esmakordselt 1996. aastal ja on nüüd kõigi suuremate veebibrauserite standardfunktsioon.

CSS võimaldab arendajatel juhtida veebilehtede välimust, kujundades selle lehe HTML-struktuuri.

CSS-i spetsifikatsioone haldab World Wide Web Consortium (W3C).

Ainuüksi CSS-is saate ehitada päris hämmastavaid asju, näiteks selle puhta CSS-i miinilaeva mängu (mis ei kasuta JavaScripti).