CSS-billedopacitet/gennemsigtighed
Indholdsfortegnelse
Egenskaben opacity angiver opaciteten/gennemsigtigheden af et element.
Gennemsigtigt billede
Egenskaben opacity kan have en værdi fra 0,0 - 1,0. Jo lavere værdi, jo mere gennemsigtig:
opacity 0.2
opacity 0.5
opacity 1
(default)
Eksempel
img {
opacity: 0.5;
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
Gennemsigtig svæveeffekt
Egenskaben opacity bruges ofte sammen med :hover-vælgeren til at ændre opaciteten ved muse-over:
Eksempel
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Eksempel forklaret
Den første CSS-blok ligner koden i eksempel 1. Derudover har vi tilføjet, hvad der skal ske, når en bruger svæver over et af billederne. I dette tilfælde ønsker vi, at billedet IKKE skal være gennemsigtigt, når brugeren svæver over det. CSS'en til dette er opacity:1;.
Når musemarkøren bevæger sig væk fra billedet, vil billedet være gennemsigtigt igen.
Et eksempel på omvendt hover-effekt:
Eksempel
img:hover {
opacity: 0.5;
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Gennemsigtig æske
Når du bruger egenskaben opacity til at tilføje gennemsigtighed til baggrunden af et element, alle dets underordnede elementer arve den samme gennemsigtighed. Dette kan gøre teksten inde i et fuldt gennemsigtigt element svær at læse:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Eksempel
div {
opacity: 0.3;
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #04AA6D;
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>
Gennemsigtighed ved hjælp af RGBA
Hvis du ikke ønsker at anvende opacitet til underordnede elementer, som i vores eksempel ovenfor, skal du bruge RGBA farveværdier. Følgende eksempel angiver opaciteten for baggrundsfarven og ikke teksten:
100% opacity
60% opacity
30% opacity
10% opacity
Du lærte fra vores CSS Colors Chapter, at du kan bruge RGB som farveværdi. Ud over RGB, du kan bruge en RGB-farveværdi med en alfakanal (RGBA) - som angiver opaciteten for en farve.
En RGBA-farveværdi er angivet med: rgba(rød, grøn, blå, alfa). Det alpha parameter er et tal mellem 0,0 (fuldt gennemsigtig) og 1,0 (fuldstændig uigennemsigtig).
Tip: Du vil lære mere om RGBA-farver i vores CSS-farverkapitel.
Eksempel
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30%
opacity */
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(4, 170, 109);
padding: 10px;
}
div.first {
background: rgba(4, 170, 109, 0.1);
}
div.second {
background: rgba(4, 170, 109, 0.3);
}
div.third {
background: rgba(4, 170, 109, 0.6);
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>
</body>
</html>
Tekst i gennemsigtig boks
This is some text that is placed in the transparent box.
Eksempel
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Eksempel forklaret
Først opretter vi et <div>-element (class="baggrund") med et baggrundsbillede og en kant.
Så laver vi endnu en <div> (class="transbox") inde i den første <div>.
Det <div class="transbox"> har en baggrundsfarve og en kant - div er gennemsigtig.
Inde i det gennemsigtige <div>, tilføjer vi noget tekst inde i et <p>-element.