396

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).

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
Nir
  • 24,619
  • 25
  • 81
  • 117

5 Answers5

604

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/

Austin Adams
  • 6,535
  • 3
  • 23
  • 27
  • 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 – Donotello Aug 26 '11 at 09:13
  • 7
    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: http://stackoverflow.com/questions/4508191/ie8-gradient-filter-not-working-if-a-background-color-exists/6300452#6300452 p.s. @Donotello 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. – robertpateii Oct 11 '11 at 20:18
  • 1
    The linked article says that for IE (version 8, at least), you need to conditionally set `background:transparent` as well. – Blazemonger Mar 21 '13 at 15:02
32

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.

Can Berk Güder
  • 109,922
  • 25
  • 130
  • 137
  • 51
    Pure CSS > Background Images – Marcy Sutton Mar 09 '12 at 21:27
  • 9
    @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. – its_me May 08 '12 at 13:39
  • 2
    The PNG fix 1 is awesome! The accept answer's method does not work on my IE6. – Fabrício Matté Jul 10 '12 at 06:41
  • @Crungmungus there are many JS hacks/polyfills (see links below the code in the answer) and even a [CSS method](http://24ways.org/2007/supersleight-transparent-png-in-ie6/) 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. – Fabrício Matté Nov 19 '13 at 15:47
16

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.

Community
  • 1
  • 1
Davy Landman
  • 15,109
  • 6
  • 49
  • 73
13

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

brillout
  • 7,804
  • 11
  • 72
  • 84
0

Thanks @davy-landmann for https://stackoverflow.com/a/638064/417153. 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;
    }
  }
Community
  • 1
  • 1
Slawa
  • 1,141
  • 15
  • 21