CSS - Apply Opacity to Element But Not to Text Within the Element

CSS - Apply Opacity to Element but NOT To Text Within The Element

This is a very, very, very popular problem. Try using rgba():

//Your opacity is the latest value here for Firefox 3+, Safari 3+, Opera 10.10+
background-color: rgba(51, 170, 238, 0.6);
//Your opacity is the first pair here (in HEX!) for IE6+
progid:DXImageTransform.Microsoft.gradient(startColorstr=#9A33AAEE,endColorstr=#9A33AAEE); 
zoom: 1;
float: left;
width: 20%;
clear: both;
/*opacity:0.4;
filter: alpha(opacity = 40);*/

You also can use http://css3please.com/ to easily convert from HEX to RGB and back.

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.

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>

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/

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.

why my text is not visible when applying opacity to element?

Opacity is applied to the whole element so anything in it will have that opacity. You can use rgba to set the opacity of the background color.

.abc, .foo{
  display: inline-block;
  width:200px;
  height:200px;
  border:1px solid red;
  background: #211E1C;
  color:green
}

.abc {
  opacity: 0.03;
}

.foo {
  background-color: rgba(33, 30, 28, 0.03);
}

<div class="abc">Hello World</div>
<div class="foo">Hello World</div>

Apply opacity to background image but not text

opacity is not an inherit property but affect the content so when you increase the opacity of .image that also affects to .text, you can use pseudo elements and background: rgba() to achieve what you want like this:

Here a working JSFiddle to play with

.wrap {    width: 100%;}.image {    background-image: url("https://i.stack.imgur.com/gijdH.jpg?s=328&g=1");    position: relative;    height: 100vh;}.image:before{    content: '';    position: absolute;    top: 0;    right: 0;    left: 0;    bottom: 0;    background: rgba(0,0,0,0.7);}.text {    color: #FFF;    position: relative;}

<div class="wrap">    <div class="image">        <div class="text">            <p>I LOVE YOU</p>        </div>    </div></div>

---

Related Topics