Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>RGB and RGBA</title> <style> .hero { position: relative; height: 200px; background: url(landscape.jpg) center/cover; } .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: bold; } .chip { display: inline-block; width: 80px; height: 40px; margin: 4px; border-radius: 4px; } </style> </head> <body> <!-- Image overlay using rgba --> <div class="hero"> <div class="overlay">Hero Text</div> </div> <div class="chip" style="background:rgb(231,76,60)"></div> <div class="chip" style="background:rgba(231,76,60,0.5)"></div> <div class="chip" style="background:rgba(231,76,60,0.2)"></div> <p>Same red, different alpha values.</p> </body> </html>
Result
Open