⊗mkSpGfCRa 54 of 128 menu

Določanje barve z rgba v CSS

Poleg formata rgb obstaja format rgba, ki deluje na podoben način, vendar s četrtim parametrom omogoča nastavitev prosojnosti barve. Ta parameter sprejema decimalne vrednosti od 0 do 1. Pri tem ena ustreza popolni neprosojnosti, nič pa popolni prosojnosti.

Poglejmo si primere.

Primer

Za začetek naredimo takšen neprosojen blok:

<div id="parent"> <div id="elem"> Lorem ipsum dolor sit amet. </div> </div> #parent { background-image: url("bg.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; padding: 30px; } #elem { width: 300px; height: 200px; border: 20px solid red; padding: 10px; font-size: 50px; font-weight: bold; color: rgba(255, 0, 0); /* rdeča barva */ }

:

Primer

Dodajmo sedaj prosojnost besedilu:

<div id="parent"> <div id="elem"> Lorem ipsum dolor sit amet. </div> </div> #parent { background-image: url("bg.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; padding: 30px; } #elem { width: 300px; height: 200px; border: 20px solid red; padding: 10px; font-size: 50px; font-weight: bold; color: rgba(255, 0, 0, 0.5); /* rdeča prosojna */ }

:

Primer

Sedaj pa naredimo prosojno obrobo:

<div id="parent"> <div id="elem"> Lorem ipsum dolor sit amet. </div> </div> #parent { background-image: url("bg.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; padding: 30px; } #elem { width: 300px; height: 200px; border: 20px solid rgba(255, 0, 0, 0.5); /* rdeča prosojna */ padding: 10px; font-size: 50px; font-weight: bold; color: red; }

:

Primer

Sedaj pa naredimo prosojno ozadje:

<div id="parent"> <div id="elem"> Lorem ipsum dolor sit amet. </div> </div> #parent { background-image: url("bg.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; padding: 30px; } #elem { width: 300px; height: 200px; border: 20px solid red; background-color: rgba(0, 0, 0, 0.4); /* črna prosojna */ padding: 10px; font-size: 50px; font-weight: bold; color: red; }

:

Praktične naloge

Nastavite odstavkom rdečo prosojno barvo.

Nastavite ozadju zeleno prosojno barvo.

Nastavite obrobi modro prosojno barvo.

Slovenščina
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Za delovanje spletnega mesta, analitiko in personalizacijo uporabljamo piškotke. Obdelava podatkov poteka v skladu s Politiko zasebnosti.
sprejmi vse nastavi zavrni