CSS ogenomskinlighet / Genomskinlighet

opacity egenskapen specificerar elementets ogenomskinlighet/Genomskinlighet.

genomskinlig bild

opacity egenskapens värdeomfattning är 0.0-1.0. Ju lägre värdet, desto genomskinligare:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

Exempel

img {
  opacity: 0.5;
}

Try it yourself

genomskinlig hover-effekt

opacity egenskapen används vanligtvis tillsammans med :hover använda tillsammans med väljare, så att ogenomskinligheten kan ändras när muspekaren är över:

Tulip
Tulip
Flower

Exempel

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

Try it yourself

Example explanation

Den första CSS-koden liknar koden i exempel 1. Dessutom har vi lagt till en effekt när användaren håller muspekaren över en av bilderna. I detta fall, när användaren håller muspekaren över bilden, vill vi att bilden inte ska vara genomskinlig. Denna CSS är opacity:1;.

När muspekaren lämnar bilden kommer bilden att bli genomskinlig igen.

Exempel på reverserad hover-effekt:

Tulip
Tulip
Flower

Exempel

img:hover {
  opacity: 0.5;
}

Try it yourself

genomskinlig låda

Använd opacity När egenskapen opacity tillämpas på ett element, är alla dess underkomponenter arvtagare av samma opacitet. Detta kan göra det svårt att läsa text i element med full genomskinlighet:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

Exempel

div {
  opacity: 0.3;
}

Try it yourself

Använda opacitet med RGBA

Om du inte vill tillämpa opacitet på underkomponenter, som i de ovanstående exemplen, använd RGBA-färgvärden. I följande exempel ställs bakgrundsfärgen in snarare än textens opacitet:

100% opacitet
60% opacitet
30% opacitet
10% opacitet

Du har redan lärt dig om CSS Colors I detta kapitel lärde vi oss att använda RGB som färgvärden. Förutom RGB kan man använda RGB-färgvärden tillsammans med alpha-kanalen (RGBA) - denna kanal bestämmer färgens opacitet.

RGBA-färgvärden specificeras som: rgba(red, green, blue, alpha) alpha Parametrarna är nummer mellan 0.0 (helt genomskinlig) och 1.0 (helt opak).

Tips:Du kommer att lära dig om CSS Colors I detta kapitel lär vi oss mer om RGBA-färger.

Exempel

div {
  background: rgba(76, 175, 80, 0.3) /* Opacitet 30% grönt bakgrund */
}

Try it yourself

Text i genomskinlig låda

Detta är några texter som finns i en genomskinlig låda.

Exempel

<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 located inside a transparent box.</p>
  </div>
</div>
</body>
</html>

Try it yourself

Example explanation

First, we create a <div> element with a background image and border (class="background").

Then, we create another <div> inside the first <div> (class="transbox").

<div class="transbox"> has a background color and border - this div is transparent.

Inside a transparent <div>, we added some text inside the <p> element.