CSS How to Change Opacity of Container But Not Text

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

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/

Text without opacity within a container with opacity

the key part is:

.overlay-black {
  background: rgba(0,0,0,0.4);
}

Please see below snippet I believe/hope this is what you expected.

.wrapper {  position: relative;  width: 300px;  height: 200px;}
.overlay {  width: 100%;  height: 100%;  position: absolute;  display: flex;  text-align: center;  justify-content: center;  align-items: center;  cursor: pointer;}
.overlay-black {  background: rgba(0,0,0,0.4);}
.overlay-red {  background: red;  opacity: 0.8;  display: none;}
.wrapper:hover .overlay-black {  display: none;}
.wrapper:hover .overlay-red {  display: flex;}
h2,p {  color: white;}
img {  width: 100%;  height: 100%;}

<div class="wrapper">  <div class="overlay overlay-black">    <h2>Yoda</h2>  </div>  <div class="overlay overlay-red">    <p>May the force be with you!</p>  </div>  <img src="http://digitalspyuk.cdnds.net/16/38/768x403/gallery-1474472774-yoda-008.jpg" alt="testpic"></div>

CSS opacity only to background color, not the text on it?

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)

R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

RGBa example

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

Opacity Control Over other Items Inside the container

The approach is wrong sir. It's child element's default behavior. You can't set opacity:1 to the child element once you set it to the parent element.

You have so many ways to achieve this. But since you are using a background color and looking for the opacity I suggest the easiest way that use background:rgba(0,0,0,0.5).This stands that the background color is #333 with the opacity of 0.5.

Learn more about rgba() here.

#container{
 /*opacity: 0.5;*/    //remove this line
 margin: 0 auto;
 padding: 0 auto;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: 380px;
 height: 480px;
 /*background: #000;*/     //remove this line 
 border: 4px solid #ffbd04;
 border-radius: 20px;
 background:(0,0,0,0.5);   //newly added line
}

CSS: opacity only background, not the text inside

The easy way would be to move the text into a separate div, like so. Basically you apply the opacity to a separate div and position the text on top...

<div id="parent">
   <div id="opacity"></div>
   <div id="child">text</div>
</div>

div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }

The other route would be rgba. Don't forget there's a separate css property to feed IE since it doesn't support the rgba property. You can also feed a transparent png.

#regForm {
   background: rgb(200, 54, 54); /* fallback color */
   background: rgba(200, 54, 54, 0.5);
}

And for IE...

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

Personally I'd go with the first option because it's less of a hassle.

Opacity of background-color, but not the text

Use rgba!

.alpha60 {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar!

via http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

---

Related Topics