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

Css Problem Overview

Can I assign the opacity property to the background property of a div only and not to the text on it?

I've tried:

background: #CCC;
opacity: 0.6;

but this doesn't change the opacity.

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

The easiest way to do this is with 2 divs, 1 with the background and 1 with the text:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

Solution 3 - Css

For Less users only:

If you don't like to set your colors using RGBA, but rather using HEX, there are solutions.

You could use a mixin like:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

And use it like:

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

Actually this is what a built-in Less function also provide:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

See https://stackoverflow.com/questions/14860874/how-do-i-convert-a-hexadecimal-color-to-rgba-with-the-less-compiler

Solution 4 - Css

This will work with every browser

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent to achieve this. CSS Opacity That Doesn’t Affect Child Elements

Check a working demo at CSS Opacity That Doesn't Affect "Children"

Solution 5 - Css

I had the same problem. I want a 100% transparent background color. Just use this code; it's worked great for me:

rgba(54, 25, 25, .00004);

You can see examples on the left side on this web page (the contact form area).

Solution 6 - Css

My trick is to create a transparent .png with the color and use background:url().

Solution 7 - Css

A great way to do this would be to use CSS 3 indeed.

Create a div width a class - e.g. supersizer on top of your page:

Then set following CSS properties:

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }

<div class="supersizer"></div>

Solution 8 - Css

For anyone coming across this thread, here's a script called thatsNotYoChild.js that I just wrote that solves this problem automatically:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Basically, it separates children from the parent element, but keeps the element in the same physical location on the page.

Solution 9 - Css

The easiest solution is to create 3 divs. One that will contain the other 2, the one with transparent background and the one with content. Make the first div's position relative and set the one with transparent background to negative z-index, then adjust the position of the content to fit over the transparent background. This way you won't have issues with absolute positioning.

Solution 10 - Css

Use:

background:url("location of image"); // Use an image with opacity

This method will work in all browsers.

Solution 11 - Css

You can't. You have to have a separate div that is just that background, so that you can only apply the opacity to that.

I tried doing this recently, and since I was already using jQuery, I found the following to be the least hassle:

Create the two different divs. They'll be siblings, not contained in each other or anything.
Give the text div a solid background color, because that will be the JavaScript-less default.
Use jQuery to get the text div's height, and apply it to the background div.

I'm sure there's some kind of CSS ninja way to do all this with only floats or something, but I didn't have the patience to figure it out.

Content Type	Original Author	Original Content on Stackoverflow
Question	Jay	View Question on Stackoverflow
Solution 1 - Css	Tim Cooper	View Answer on Stackoverflow
Solution 2 - Css	Kostas	View Answer on Stackoverflow
Solution 3 - Css	Sebastien Lorber	View Answer on Stackoverflow
Solution 4 - Css	Hussein	View Answer on Stackoverflow
Solution 5 - Css	user2178930	View Answer on Stackoverflow
Solution 6 - Css	user1542894	View Answer on Stackoverflow
Solution 7 - Css	Wolfgang Zotter	View Answer on Stackoverflow
Solution 8 - Css	Louis L.	View Answer on Stackoverflow
Solution 9 - Css	Balsa	View Answer on Stackoverflow
Solution 10 - Css	Neeraj	View Answer on Stackoverflow
Solution 11 - Css	sdleihssirhc	View Answer on Stackoverflow