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

Question

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:http://yagen.org/

The gallery In the above of the page.

Answer 1

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: https://css-tricks.com/rgba-browser-support/

Answer 2

If you have your HTML of this sort:

<div id="container">
    <p>
        Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.
    </p>
    <a href="#">This is a link</a>
</div>

Even if your CSS is this.

#container {
    background: #000;
    color: #fff;
    opacity: 0.4;
}

#container a {
    color: #ff0450;
    opacity: 1;
}

It will not make the link have a greater opacity than the container because opacity is inherited from the parent.

The only way to do it is using rgba values but it will not work in IE.

The correct way to do it is this -

#container {
    background: rgba(0,0,0,0.4);
    color: #fff;
}

Take a look at this fiddle