Opacity of background-color, but not the text [duplicate]

Question

How do I make the cross-browser (including Internet Explorer 6) transparency for the background of a div while the text remains opaque?

I need to do it without using any library such as jQuery, etc. (But if you know of a library that does it I'd love to know so I can look at their code).

Filth

Answer 1

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/

Mullen

Is there any possibility that IE7 mode in IE9 is different from actual IE7? I'm asking because this code isn't working there. But if we use only three last rules (without background-color: rgb(0, 0, 0);) - all just fine – Headquarters

I tried this solution and it did not work in IE8 because IE8 correctly applies the background color. I just took out the fallback for other browsers (which is what, old versions of firefox?). Explained here: #4508691 p.s. @Headquarters ie7 mode in ie9 is definitely not is 100% accurate. I use a CMS that requires IE7/8 and the compatibility mode in IE9 breaks all sorts of things in it. – Kaczmarek

The linked article says that for IE (version 8, at least), you need to conditionally set background:transparent as well. – Dominus

Answer 2

I use an alpha-transparent PNG for that:

div.semi-transparent {
  background: url('semi-transparent.png');
}

For IE6, you'd need to use a PNG fix (1, 2), though.

Mitchel

Pure CSS > Background Images – Soave

@MarcySutton IMO not always, definitely not. If you look at the answer marked as the answer, you'd understand why. How many hours should we waste for cross-browser compatibility. So, when you absolutely can, (sure, not always) you can use background images. Like I said, JMO. – Adabelle

The PNG fix 1 is awesome! The accept answer's method does not work on my IE6. – Tapster

@Crungmungus there are many JS hacks/polyfills (see links below the code in the answer) and even a CSS method to fix PNG transparency in IE6. Though, in more complex use cases they tend to break one way or another so I've gave up on IE6 PNG transparency several months ago. – Tapster

Answer 3

I've created that effect on my blog Landman Code.

What I did was

#Header {
  position: relative;
}
#Header H1 {
  font-size: 3em;
  color: #00FF00;
  margin:0;
  padding:0;
}
#Header H2 {
  font-size: 1.5em;
  color: #FFFF00;
  margin:0;
  padding:0;
}
#Header .Background {
  background: #557700;
  filter: alpha(opacity=30);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.30;
  opacity: 0.3;
  zoom: 1;
}
#Header .Background * {
  visibility: hidden; // hide the faded text
}
#Header .Foreground {
  position: absolute; // position on top of the background div
  left: 0;
  top: 0;
}

<div id="Header">
  <div class="Background">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
  <div class="Foreground">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
</div>

The important thing that every padding/margin and content must be the same in both the .Background as .Foreground.

Claimant

Answer 4

Relaxing your requirement to work on IE6 and legacy browsers you can use ::before and display: inline-block

div
{
  display: inline-block;
  position: relative;    
}
div::before
{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background:red;
  opacity: .2;
}

Demo at http://jsfiddle.net/KVyFH/172/ ​

It will work on any modern browser

Jasminejason

won't work with overflow. jsfiddle.net/KVyFH/256 – Pohai

I suggest to also add to the "before" elemnt "top: 0; right:0" or it wouldn't work with padding – Sometimes

Answer 5

Thanks @davy-landmann for https://mcmap.net/q/40953/-opacity-of-background-color-but-not-the-text-duplicate. That's what I was looking for! Same effect with LESS code:

  @searchResultMinHeight = 200px;
  .searchResult {
    min-height: @searchResultMinHeight;

    position: relative;
    .innerTrans {
      background: white;
      .opacity(0.5);
      min-height: @searchResultMinHeight;
    }
    .innerBody {
      padding: 0.5em;
      position: absolute;
      top: 0;
    }
  }

Commensurable