By Nir


2009-03-12 09:51:09 8 Comments

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

5 comments

@Davy Landman 2009-03-12 10:42:11

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.

@Austin Adams 2011-01-17 20:34:05

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/

@Donotello 2011-08-26 09:13:40

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

@robertpateii 2011-10-11 20:18:14

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: stackoverflow.com/questions/4508191/… 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.

@Blazemonger 2013-03-21 15:02:21

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

@brillout 2012-08-21 13:12:01

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

@TomSawyer 2012-12-19 14:40:29

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

@Liran Brimer 2019-01-10 08:29:31

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

@Slawa 2012-10-04 20:47:42

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;
    }
  }

@Can Berk Güder 2009-03-12 09:53:05

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.

@Marcy Sutton 2012-03-09 21:27:03

Pure CSS > Background Images

@its_me 2012-05-08 13:39:23

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

@Fabrício Matté 2012-07-10 06:41:59

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

@Fabrício Matté 2013-11-19 15:47:43

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

Related Questions

Sponsored Content

6 Answered Questions

[SOLVED] How to make div background color transparent in CSS

24 Answered Questions

[SOLVED] How do I style a <select> dropdown with only CSS?

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1513295 View
  • 2218 Score
  • 28 Answer
  • Tags:   html css opacity

5 Answered Questions

[SOLVED] HTML/CSS text background transparent but text not

10 Answered Questions

[SOLVED] CSS background-image-opacity?

  • 2011-07-31 15:07:02
  • Niet the Dark Absol
  • 318390 View
  • 67 Score
  • 10 Answer
  • Tags:   html css css3

2 Answered Questions

[SOLVED] Change opacity of background colour, but not text

  • 2018-11-15 18:24:55
  • wtreston
  • 40 View
  • 0 Score
  • 2 Answer
  • Tags:   html css

0 Answered Questions

Semi-Opaque Text Background?

1 Answered Questions

2 Answered Questions

[SOLVED] How to make transparent text?

  • 2016-01-05 21:58:01
  • A. Groves
  • 9257 View
  • 1 Score
  • 2 Answer
  • Tags:   html css

4 Answered Questions

[SOLVED] How to prevent text in a table cell from wrapping

  • 2008-11-18 21:39:28
  • pkaeding
  • 220378 View
  • 273 Score
  • 4 Answer
  • Tags:   html css

Sponsored Content