Tutorial :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>  


Solution:1

You'd better use semitransparent png as a background.


Solution:2

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


Solution:3

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/


Solution:4

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');  


Solution:5

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

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


Solution:6

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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »