Opacity of background-color but not the text

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

User · Accepted Answer

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

User · Answer

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

User · Answer

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

User · Answer

I ve created that effect on my blog Landman Code  What I did was  x000D   x000D   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    x000D   lt div id  Header  gt     lt div class  Background  gt       lt h1 gt Title lt  h1 gt       lt h2 gt Subtitle lt  h2 gt     lt  div gt     lt div class  Foreground  gt       lt h1 gt Title lt  h1 gt       lt h2 gt Subtitle lt  h2 gt     lt  div gt   lt  div gt  x000D   x000D   x000D   The important thing that every padding margin and content must be the same in both the  Background as  Foreground

User · Answer

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

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

Examples related to css

Examples related to opacity