CSS gennemsigtighed/transparenthed

opacity Egenskaben specificerer elementets gennemsigtighed/transparenthed.

gennemsigtige billeder

opacity Egenskabets værdiområde er 0.0-1.0. Jo lavere værdien er, jo mere gennemsigtig:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

Eksempel

img {
  opacity: 0.5;
}

Prøv selv

gennemsigtig museoverfølsomhed

opacity Egenskaben bruges normalt sammen med :hover Ved at bruge vælger sammen, kan vi ændre gennemsigtigheden, når musen holdes over:

Tulip
Tulip
Flower

Eksempel

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

Prøv selv

Eksempel Forklaring

Den første CSS-blok ligner koden i eksempel 1. Derudover har vi tilføjet en effekt, når brugeren holder musen over en af billederne. I dette tilfælde, når brugeren holder musen over billedet, ønsker vi, at billedet ikke er gennemsigtigt. Denne CSS er opacity:1;.

Når musepikeren forlader billedet, bliver billedet igen gennemsigtigt.

Eksempel på omvendt mouse-over-effekt:

Tulip
Tulip
Flower

Eksempel

img:hover {
  opacity: 0.5;
}

Prøv selv

gennemsigtig boks

Brug af opacity Når du tilføjer gennemsigtighed til elementets baggrund, arver alle underelementer den samme gennemsigtighed. Dette kan gøre teksten i fuldstændigt gennemsigtige elementer svær at læse:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

Eksempel

div {
  opacity: 0.3;
}

Prøv selv

Brug af RGBA-gennemsigtighed

Hvis du ikke ønsker at anvende gennemsigtighed på underelementer, som i de ovenstående eksempler, skal du bruge RGBA-farveværdier. I de nedenstående eksempler sættes baggrundsfarven, ikke teksten, til at være gennemsigtig:

100% gennemsigtighed
60% gennemsigtighed
30% gennemsigtighed
10% gennemsigtighed

Du har lært CSS 颜色 I dette kapitel lærte vi, at vi kan bruge RGB som farveværdier. Udover RGB kan vi også bruge RGB-farveværdier sammen med alpha-kanalen (RGBA) - denne kanal bestemmer farvens gennemsigtighed.

RGBA-farveværdier specificeres som: rgba(rød, grøn, blå, alpha) alpha Parameterne er tal mellem 0.0 (fuldstændig gennemsigtig) og 1.0 (ikke gennemsigtig).

Tip:Du vil finde CSS 颜色 I dette kapitel lærte vi mere om RGBA-farver.

Eksempel

div {
  background: rgba(76, 175, 80, 0.3) /* Gennemsigtighed på 30% grøn baggrund */
}

Prøv selv

Tekster i gennemsigtig boks

Dette er nogle tekster, der er placeret i en gennemsigtig boks.

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>Dette er noen tekster som ligger i en gjennomsiktig boks.</p>
  </div>
</div>
</body>
</html>

Prøv selv

Eksempel Forklaring

Først lager vi en <div>-element med bakgrunnsbilde og kant (class="background").

Deretter lager vi en annen <div> (class="transbox") i den første <div>-en.

<div class="transbox"> har bakgrunnsfarge og kant - denne div-en er gjennomsiktig.

I en gjennomsiktig <div>, legger vi til noen tekster i <p>-elementet.