Transparency with RGBA

Part of the Styling with CSS section of Coddy's HTML journey — lesson 28 of 76.

In CSS, RGBA colors are an extension of RGB colors that include an alpha channel to specify the opacity of a color. RGBA stands for Red, Green, Blue, and Alpha. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque), allowing you to create colors with varying degrees of transparency.

Here's the basic syntax for using RGBA colors in CSS:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

For example:

p {
    color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
    background-color: rgba(0, 255, 0, 0.3); /* Semi-transparent green */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Semi-transparent blue */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
}

Challenge

Easy

You are given an HTML document with an <h3> heading and a <p> paragraph. Your task is to use the background-color property with the rgba() function to style these elements with transparency. Follow the steps below:

Write a CSS rule that targets the <h3> element. Set the background color to blue using rgba(0, 0, 255, 0.5) (50% transparency).
Write a CSS rule that targets the <p> element. Set the background color to green using rgba(0, 128, 0, 0.3) (30% transparency).

Cheat sheet

RGBA colors extend RGB colors with an alpha channel for opacity. The alpha parameter ranges from 0.0 (fully transparent) to 1.0 (fully opaque).

Basic syntax:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

Examples:

p {
    color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
    background-color: rgba(0, 255, 0, 0.3); /* Semi-transparent green */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
}

Try it yourself

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>