CSS element opacity that does not affect transparency of its contents

Question

I'm trying to create a <div> that has an opacity of 60%. I want the content of that <div> to be clear and not transparent.

The <div> with the class white_bg should have a white background color with 60% transparency, but the text and the image inside that <div> should be clear and not transparent at all.

Is that possible?

Please note that the text in the paragraph with the class main_content will be dynamic and the height will always change, so I can't just set a width and a height for the white_bg class and use position absolute and place it right behind the paragraph.

HTML

<div class="white_bg"> <h1 class="main_titles">Toon Boom Animate</h1> <h6 class="subtitles">The Most Reliable Flash Animator Companion</h6> <p class="main_content"> <img class="floatright" src="images/images.jpg" alt="" /> text comes here </p> </div>

Ben Rowe · Accepted Answer · 2010-07-28 07:07:54Z

3

You can use css3's rgba() to set the background colour with an alpha value, and then use a transparent png for IE.

answered Jul 28, 2010 at 7:07

Ben Rowe

28.8k6 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fantactuka · Accepted Answer · 2010-07-28 07:04:46Z

2

You'd better use semitransparent png as a background.

answered Jul 28, 2010 at 7:04

fantactuka

3,33421 silver badges29 bronze badges

1 Comment

Naruto Over a year ago

I think that this would be the perfect solution, cause the the content in that div is dynamic, if the content in that page was static it would've worked by setting the background an absolute position right behind the div i want without the need of changing the height of the div ... Thanks.

mongo296 · Accepted Answer · 2011-04-11 02:20:42Z

either the semi-trans png as fantactuka mentions, or use position to place non-transparent content over your transparent div a la this blog post:

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Anando · Accepted Answer · 2014-09-06 20:15:50Z

I am putting code for chrome , FF and IE.. the first code though works on ie9 and above but the second one is for below ei9

background-color: rgba(0, 255, 0, 0.5); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

John Weisz · Accepted Answer · 2014-10-13 17:51:31Z

Use a semi transparent image, or apply this css to your element:

.white_bg { background-color: rgba(255, 255, 255, 0.5); }

Adam P · Accepted Answer · 2010-07-29 01:50:42Z

-1

For you white_bg class use this:

.white_bg { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; }

Between those four properties, your bases should be pretty well covered for any major browser.

edited Jul 29, 2010 at 1:50

answered Jul 28, 2010 at 7:10

Adam P

4,7136 gold badges35 silver badges40 bronze badges

2 Comments

janmoesen Over a year ago

This will also render the contents of the .white_bg partially transparent.

Ben Rowe Over a year ago

opacity effects the background as well as the text.

Collectives™ on Stack Overflow

CSS element opacity that does not affect transparency of its contents

HTML

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Linked

Related