CSS Background Image Opacity / Transparency [Explained With example]

Opacity / Transparency

Opacity is the level of transparency of an element, with 1 being fully opaque and 0 being fully transparent. In CSS, you can set the opacity of a background image using the opacity property.

Transparent Image

To make a background image transparent, you can set the opacity property of the img element to a value between 0 and 1:

img {
    opacity: 0.5;
}

Transparent Hover Effect

To create a transparent hover effect, you can use the :hover pseudo-class to change the opacity of the image when the mouse is over it:

img {
    opacity: 1;
}

img:hover {
    opacity: 0.5;
}

Transparent Box

To create a transparent box, you can set the opacity property of the div element to a value between 0 and 1:

div {
    background-color: #ffffff;
    opacity: 0.5;
    width: 300px;
    height: 200px;
}

Transparency using RGBA

Alternatively, you can use the rgba() function to specify the level of transparency using the alpha channel. The alpha channel is a value between 0 and 1 that determines the level of transparency, with 0 being fully transparent and 1 being fully opaque.

div {
    background-color: rgba(255, 255, 255, 0.5);
    width: 300px;
    height: 200px;
}

Text in Transparent Box

To make the text in a transparent box readable, you can set the color property of the p element to a solid color:

div {
    background-color: rgba(255, 255, 255, 0.5);
    width: 300px;
    height: 200px;
}

p {
    color: #000000;
}

Here is an example of a transparent box with the text:

<div>
    <p>This is some text in a transparent box.</p>
</div>