87 of 313 menu

Funktionen opacity

Funktionen opacity låter dig ändra genomskinligheten för en bakgrundsbild. Värdet 100% eller 1 behåller bildens ursprungliga genomskinlighet. Värdet 0 betyder att bilden blir helt genomskinlig. Ett tal inom detta intervall anger delvis genomskinlighet för bakgrunden. Negativa värden kan inte anges. Standardvärdet är 1.

Syntax

selektor { filter: opacity(tal); }

Exempel

Låt oss ställa in genomskinligheten för vår bild till 50%:

<div id="elem"></div> #elem { filter: opacity(50%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Exempel

Och låt oss nu ställa in genomskinligheten till 100%:

<div id="elem"></div> #elem { filter: opacity(100%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Exempel

Och låt oss nu ange ett värde i funktionen opacity som är lika med 0:

<div id="elem"></div> #elem { filter: opacity(0); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Se även

  • funktionen blur,
    som oskärper bakgrunden
  • funktionen brightness,
    som ställer in ljusstyrkan för bakgrunden
  • funktionen contrast,
    som ställer in kontrasten för bakgrunden
  • funktionen drop-shadow,
    som lägger till en skugga på bakgrunden
  • funktionen hue-rotate,
    som ställer in nyansen för bakgrunden
  • funktionen invert,
    som inverterar bakgrundens färger
  • funktionen sepia,
    som omvandlar bakgrunden till sepia
  • egenskapen background,
    som är en genvägsegenskap för bakgrunden
  • egenskapen background-image,
    som låter dig ställa in en bakgrundsbild för ett element
Svenska
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Vi använder kakor för webbplatsens funktion, analys och personalisering. Behandling av data sker i enlighet med Integritetspolicyn.
acceptera alla anpassa avvisa