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.

score 28 · Accepted Answer · edited Mar 08 '18 at 19:25

28

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/

edited Mar 08 '18 at 19:25

Neeko

1,139
1
10
26

answered Dec 11 '11 at 14:55

derekerdmann

17,696
11
76
110

@treenet Unfortunately, IE [doesn't support `rgba`](http://css-tricks.com/2151-rgba-browser-support/) until IE 9. – Kevin Ji Dec 11 '11 at 18:07
@treenet - this is a good place to use a technique called progressive enhancement - browsers that support it get a little more visual appeal, but the others aren't left out. Users of older browsers will never know the difference, and it doesn't impact their ability to use the site. – derekerdmann Dec 11 '11 at 20:42

score 4 · Answer 2 · answered Dec 11 '11 at 17:29

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

score 0 · Answer 3 · answered Apr 23 '14 at 07:24

Hi Here is the simple example

html

  <section class="op5">
    <div class="op1">

    </div>
  </section>

css

 .op5{
        width:100px;
        height:100px;
        text-align:center;
        background-color:rgba(0,0,0,0.5);
        position:relative;
    }
    .op1{
        width:50px;
        height:50px;
        margin:0 auto;
        opacity:1;
        background-color:red;
    }

Note:- In the parent we have used rgba format and in the children element we have used opacity property

score 0 · Answer 4 · answered Aug 05 '22 at 18:13

0

The easiest is to use rgba If we have a div with id="parent", we can do this

#parent{
    background-color: rgba(255, 0, 255, 0); /*1 for completely opaque, 0 for completely transparent*/ 
}

answered Aug 05 '22 at 18:13

RCK Euler

35
3

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

4 Answers4

html

css

Linked