Culori CSS
Culoarea în CSS poate fi scrisă ca unul dintre cele peste 140 de nume sau ca valoare HEX, RGB, RGBA, HSL ori HSLA și există și opacitatea.
Culori RGBA
Ia o culoare RGB, adaugă un canal alfa pentru a-i controla opacitatea și obții RGBA.
Notația este rgba(red, green, blue, alpha).
Alfa este un număr de la 0.0 (complet transparent) până la 1.0 (complet opac).
Exemplu
Trei paragrafe, fiecare având propriul fundal RGBA.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGBA Colors</title>
</head>
<body>
<h1>RGBA Colors</h1>
<p style="background-color:rgba(255,0,0,0.3);padding:20px;">rgba(255, 0, 0, 0.3) - red with opacity</p>
<p style="background-color:rgba(0,255,0,0.3);padding:20px;">rgba(0, 255, 0, 0.3) - green with opacity</p>
<p style="background-color:rgba(0,0,255,0.3);padding:20px;">rgba(0, 0, 255, 0.3) - blue with opacity</p>
</body>
</html>
Sintaxă RGBA
rgba(red, green, blue, alpha)
Valori de opacitate RGBA
Aici roșul rămâne constant, în timp ce valoarea alfa se schimbă.
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
Culori HSLA
HSLA urmează aceeași idee pornind de la HSL: canalul alfa suplimentar decide cât de opacă este culoarea.
Notația sa este hsla(hue, saturation, lightness, alpha).
Și aici, alfa merge de la 0.0 (complet transparent) până la 1.0 (complet opac).
Exemplu
Patru paragrafe, fiecare având propriul fundal HSLA.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HSLA Colors</title>
</head>
<body>
<h1>HSLA Colors</h1>
<p style="background-color:hsla(120,100%,50%,0.3);padding:20px;">hsla(120, 100%, 50%, 0.3) - green with opacity</p>
<p style="background-color:hsla(120,100%,75%,0.3);padding:20px;">hsla(120, 100%, 75%, 0.3) - light green with opacity</p>
<p style="background-color:hsla(120,100%,25%,0.3);padding:20px;">hsla(120, 100%, 25%, 0.3) - dark green with opacity</p>
<p style="background-color:hsla(120,60%,70%,0.3);padding:20px;">hsla(120, 60%, 70%, 0.3) - pastel green with opacity</p>
</body>
</html>
Sintaxă HSLA
hsla(hue, saturation, lightness, alpha)
Valori de opacitate HSLA
Aici nuanța roșie și opacitatea de 0.3 rămân constante, în timp ce luminozitatea se schimbă.
hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);
Proprietatea CSS opacity
În loc să afecteze o singură culoare, proprietatea opacity se aplică întregului element, astfel încât culoarea de fundal și textul devin transparente împreună.
Valoarea sa trebuie să fie un număr de la 0.0 (complet transparent) la 1.0 (complet opac).
Notă: Orice text din element preia aceeași transparență sau opacitate.
Exemplu
Toate cele trei paragrafe combină o culoare de fundal RGB cu o opacitate de 0.6.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Opacity Property</title>
</head>
<body>
<h1>CSS opacity Property</h1>
<p style="background-color:rgb(255,0,0);opacity:0.6;padding:20px;">rgb(255, 0, 0) with opacity 0.6 - red with opacity</p>
<p style="background-color:rgb(0,255,0);opacity:0.6;padding:20px;">rgb(0, 255, 0) with opacity 0.6 - green with opacity</p>
<p style="background-color:rgb(0,0,255);opacity:0.6;padding:20px;">rgb(0, 0, 255) with opacity 0.6 - blue with opacity</p>
<p>Notice that the text inside the elements is also transparent!</p>
</body>
</html>