How to set opacity on container div and not on children text?


I have a DIV with the CSS style rule opacity: 0.4;.

Inside the div there is a a tag and the text also has an opacity.

How can I declare for the text: opacity :1 or any good idea….
You can see it in the following link:

The gallery In the above of the page.


If you set the opacity of an element, the opacity is set for all of its children as well. If you want opaque text on a transparent background, take a look at RGBa.

The result would look something like this:

.mycontainer {
    background: rgb(60, 60, 60);
    background: rgba(60, 60, 60, 0.4);

.mycontainer a {
    color: #fff;

The first background declaration serves as a fallback in case a browser doesn’t support RGBa color – it will simply be a solid color instead.

Here’s a great reference for RGBa color:

Answered By – derekerdmann

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published