CSS RGBA: Transparenz und Farbe gleichzeitig definieren

Das neue Feature RGBA erlaubt es uns, in den CSS Dateien und Tags eine Farbe mittels RGB Werten anzugeben und zusätzlich eine Transparenz zu schaffen. Möchten wir einen roten Hintergrund mit 50% Transparenz, definieren wir background-color:rgba(255,0,0,0.5);. Der letzte Parameter des rgba-Befehls gibt die Transparenz an. Alternativ kann auch mit opacity das Innere der Box per CSS transparent dargestellt werden.

Beispiele

Ohne RGBA
.element {
    background:rgb(0,0,0);
}
Mit RGBA – 20%
.element {
    background:rgba(0,0,0,0.2);
}
Mit Opacity (Inhalt und Rahmen wird ebenfalls transparent)
.element {
    background:rgb(0,0,0);
    opacity:0.2;
}

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
8 Bewertungen
73 %
1
5
3.65
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.