1

What I would like to do is create a 'div' element in an html document, and using CSS or Javascript/JQuery, change the background transparency so that it looks something like Simple Calendar Widget or Glass Widgets from Android. Does anyone know a way to do this? I have tried the css Opacity function, but it messes with all the text, and if I make a second 'div' and set the transparency of that, I need to manually resize it, which I would prefer not to do.

I apologize if there is a simple way to do this, and I have wasted everyone's time, but I am really stuck on this.

Michael Bell
  • 184
  • 1
  • 2
  • 16
  • You could use IE `filters` and in firefox/etc.. you can use `background: rgba(0,0,0,.2)` where .2 is the opacity (from 0-1) – Jeff Shaver Apr 10 '13 at 16:11
  • possible duplicate of [Opacity of background, but not the text](http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text) – isherwood Apr 10 '13 at 16:12
  • Easy way = use a .png image with 1x1 px size! – adeneo Apr 10 '13 at 16:12

1 Answers1

1

You should use the alpha value in rgba(0,0,0,0.5) if you don't want the opacity to affect the descendant text-nodes ..

http://www.w3.org/TR/css3-color/#rgba-color

The only downside is no support below IE 9 (http://caniuse.com/css3-colors)

Adrift
  • 58,167
  • 12
  • 92
  • 90