CSS Opacity Property og Image Opacity Explained

De opacityejendom styrer, hvordan uigennemsigtig et element er på en skala fra 0.0 til 1.0. Jo lavere værdi, jo mere gennemsigtig er elementet.

Du kan vælge, i hvilket omfang du vil gøre elementet gennemsigtigt. Du skal tilføje følgende CSS-egenskab for at opnå gennemsigtighedsniveauer.

Fuldt uigennemsigtig

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

Semitransparent

.class-name { opacity: 0.5; }

Fuldt gennemsigtig

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

Alternativt kan du bruge rgbatil at indstille et elements opacitet:

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

Dette indstiller background-colorelementet til sort med 50% opacitet. Den sidste værdi i en rgbaværdi er alfa-værdien . En alfa-værdi på 1 er lig med 100% opacitet, og 0,5 (eller .5 som ovenfor) er lig med 50% opacitet.

Billedopacitet og gennemsigtighed

Den opacityegenskab gør det muligt at lave et billede gennemsigtigt ved at sænke hvordan uigennemsigtig det er.

Opacity tager en værdi mellem 0,0 og 1,0.

1.0 er standardværdien for ethvert billede. Det er fuldstændig uigennemsigtigt.

Eksempel

img { opacity: 0.3; }

Inkluder filter: alpha(opacity=x)til IE8 og tidligere. X tager en værdi fra 0-100.

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

Her er et eksempel på et billede, der er indstillet til parametrene i eksemplet ovenfor.

billede med 30% opacitet

Du kan parre opacitymed for :hoverat oprette en dynamisk mus-over-effekt.

Eksempel:

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

Et kodeprægende eksempel for at vise et gennemsigtigt billede, der bliver uigennemsigtigt, når det svæver

Du kan skabe den modsatte effekt med mindre kode, da billedet som standard er 1,0 opacitet

Eksempel:

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

Her er et codepen-eksempel for at vise gennemsigtighed ved mus-over.

Mere om CSS

Cascading Style Sheets (CSS)

CSS er et akronym for Cascading Style Sheets. Den blev først opfundet i 1996 og er nu en standardfunktion i alle større webbrowsere.

CSS giver udviklere mulighed for at kontrollere, hvordan websider ser ud ved at "style" HTML-strukturen på denne side.

CSS-specifikationer vedligeholdes af World Wide Web Consortium (W3C).

Du kan bygge nogle ret fantastiske ting i CSS alene, såsom dette pure-CSS Minesweeper-spil (som ikke bruger JavaScript).