How To Make The Background Transparent Css

CSS Opacity / Transparency

The opacity property specifies the opacity/transparency of an element.

Transparent Paradigm

The opacity belongings can take a value from 0.0 - ane.0. The lower value, the more than transparent:

Forest

opacity 0.two

Forest

opacity 0.5

Forest

opacity 1
(default)

Transparent Hover Effect

The opacity holding is frequently used together with the :hover selector to change the opacity on mouse-over:

Example explained

The first CSS block is similar to the code in Instance 1. In addition, we have added what should happen when a user hovers over ane of the images. In this example we desire the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:i;.

When the mouse pointer moves away from the image, the epitome will be transparent once again.

An example of reversed hover effect:

Transparent Box

When using the opacity belongings to add transparency to the background of an element, all of its kid elements inherit the same transparency. This tin brand the text inside a fully transparent chemical element difficult to read:

Transparency using RGBA

If you do not want to use opacity to child elements, like in our example to a higher place, use RGBA color values. The following example sets the opacity for the background color and not the text:

You learned from our CSS Colors Chapter, that y'all tin can use RGB equally a color value. In improver to RGB, you can use an RGB color value with an blastoff channel (RGBA) - which specifies the opacity for a colour.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number betwixt 0.0 (fully transparent) and i.0 (fully opaque).

Tip: You lot will learn more about RGBA Colors in our CSS Colors Affiliate.

Example

div {
background: rgba(76, 175, lxxx, 0.three) /* Green groundwork with 30% opacity */
}

Try it Yourself »

Text in Transparent Box

This is some text that is placed in the transparent box.

Example

<html>
<head>
<fashion>
div.background {
background: url(klematis.jpg) repeat;
edge: 2px solid blackness;
}

div.transbox {
margin: 30px;
groundwork-color: #ffffff;
edge: 1px solid black;
opacity: 0.6;
}

div.transbox p {
margin: five%;
font-weight: bold;
colour: #000000;
}
</style>
</head>
<torso>

<div class="background">
<div course="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>
</html>

Effort it Yourself »

Example explained

First, we create a <div> element (form="groundwork") with a background paradigm, and a border.

Then we create another <div> (class="transbox") inside the outset <div>.

The <div course="transbox"> have a background color, and a edge - the div is transparent.

Inside the transparent <div>, nosotros add some text within a <p> element.