CSS-läpinäkyvyys / läpinäkyvyys

opacity ominaisuus määrittää elementin läpinäkyvyyden. CSS-läpinäkyvyys / läpinäkyvyys

läpinäkyvä kuva

opacity ominaisuuksien arvo-ala on 0.0-1.0. Arvojen laskiessa, läpinäkyvyys kasvaa:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

Esimerkki

img {
  opacity: 0.5;
}

Kokeile itse

läpinäkyvä hover-efekti

opacity ominaisuudet yleensä yhdistetään :hover valitsimet yhdessä, jotta voimme muuttaa läpinäkyvyyttä hover-tilassa:

Tulip
Tulip
Kukka

Esimerkki

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

Kokeile itse

Esimerkki selitys

Ensimmäinen CSS-lohko on samanlainen kuin esimerkki 1:ssä oleva koodi. Lisäksi lisäsimme efektin, joka aktivoituu, kun käyttäjä hoveraa yhtä kuvasta. Tässä tapauksessa haluamme, että kuvat ovat läpinäkyviä, kun käyttäjä hoveraa niitä. Tämä CSS on opacity:1;.

Kun hiiren osoitin poistuu kuvasta, kuva tulee jälleen läpinäkyväksi.

Käänteisen hiiren osoittimen vaikutuksen esimerkki:

Tulip
Tulip
Kukka

Esimerkki

img:hover {
  opacity: 0.5;
}

Kokeile itse

läpinäkyvä kehyksessä

Käytä opacity Kun asetat elementin taustalle läpinäkyvyyden, kaikki sen alisijat perivät saman läpinäkyvyyden. Tämä voi tehdä täysin läpinäkyvien elementtien sisällä olevasta tekstistä vaikeasti luettavaa:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

Esimerkki

div {
  opacity: 0.3;
}

Kokeile itse

RGBA-läpinäkyvyyden käyttö

Jos et halua soveltaa läpinäkyvyyttä alisijalle, kuten yllä olevassa esimerkissä, käytä RGBA-väriarvoja. Seuraavassa esimerkissä asetetaan taustaväri eikä tekstin läpinäkyvyyttä:

100% läpinäkyvyys
60% läpinäkyvyys
30% läpinäkyvyys
10% läpinäkyvyys

Olet oppinut CSS värit Tässä luvussa oppisit käyttää RGB:ää väriarvona. RGB:n lisäksi voit käyttää RGB-väriarvoja yhdessä alpha-kanavan (RGBA) kanssa - tämä kanava määrittää värien läpinäkyvyyden.

RGBA-väriarvot määritetään: rgba(punainen, vihreä, sininen, alpha) alpha Parametrit ovat lukuja välillä 0.0 (täysin läpinäkyvä) ja 1.0 (täysin peittävä).

Vinkki:Voit löytää CSS värit Tässä luvussa oppisit lisää RGBA-väreistä.

Esimerkki

div {
  background: rgba(76, 175, 80, 0.3) /* 30% läpinäkyvyyden vihreä tausta */
}

Kokeile itse

Teksti läpinäkyvässä kehyksessä

Tämä on tekstejä, jotka sijaitsevat läpinäkyvässä kehyksessä.

Esimerkki

<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>Tämä on teksti, joka sijaitsee läpinäkyvässä kehysssä.</p>
  </div>
</div>
</body>
</html>

Kokeile itse

Esimerkki selitys

Ensiksi luomme taustakuvan ja reunan sisältävän <div>-elementin (class="background").

Lisäksi luomme toisen <div>-elementin ensimmäiseen <div>-elementtiin (class="transbox").

<div class="transbox"> sisältää taustavärin ja reunan - tämä div on läpinäkyvä.

Transparentissa <div>-elementissä lisäsimme tekstiä <p>-elementtiin.