CSS opacity() funktio

Määrittely ja käyttö

CSS opacity() Suodatusfunktiot käytetään elementin läpinäkyvyyden vaikutuksen soveltamiseen.

100%（tai 1）ei vaikuta
50%（tai 0.5）tekee elementistä 50% läpinäkyvän
0%（tai 0）tekee elementistä täysin läpinäkyvän

Esimerkki

Esimerkki 1

Aseta eri läpinäkyvyys kuville:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

Kokeile itse

Esimerkki 2

muuntaa opacity() ja backdrop-filter Ominaisuudet yhdessä käytettynä:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: opacity(50%);
  backdrop-filter: opacity(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Kokeile itse

CSS syntax

opacity(amount)

Arvo	Kuvaus
amount	Valinnainen. Määritä läpinäkyvyyden arvo tai prosentti. 0%（tai 0）tekee elementistä täysin läpinäkyvän. 100%（tai 1）merkitsee alkuperäistä kuvaa（ei vaikutusta）。Oletusarvo on 1。

Arvo

Kuvaus

amount

Valinnainen. Määritä läpinäkyvyyden arvo tai prosentti. 0%（tai 0）tekee elementistä täysin läpinäkyvän.

100%（tai 1）merkitsee alkuperäistä kuvaa（ei vaikutusta）。Oletusarvo on 1。