RGBA Farver

RGBA kan bruges til at lave gennemsigtige farver i HTML og CSS. Se hvordan i denne artikel.

1429 visninger

Edited: 2017-09-02 23:48

RGBA er en ny funktion i CSS som giver brugerne mulighed for at lave gennemsigtige farver. "A"et i erklæringen står for Alfa. I modsætning til RGB erklæringer, omfatter RGBA en alfakanal - det betyder du kan lave farver gennemsigtige.

En alfa værdi på 1 er helt uigennemsigtig, imens en værdi på 0.5 vil gøre farven halvt gennemsigtig (50%).

RGBA eksempel

Vist nedenfor er 2 div elementer der er overlappet ved hjælp af Position og Z-index. Eksemplet vist nedenfor er ikke et billede.

Koden brugt til eksemplet ovenfor:

<div style="position: relative;z-index: 1;background: #FF7751;width: 150px;height: 150px;margin: 0 0 35px 1em;">
  <div style="position: absolute;z-index: 2;background: rgba(0,0,255,0.5);width: 150px;height: 150px;top: 25px;left: 25px;">
  </div>
</div>

RGBA eksempel

Fortæl os hvad du tænker: