advanced code snippet search

Posted By

jonhenshaw on 08/03/09


Tagged

opacity inheritence


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

burcham
winterman
silentbob84
67ideas


Stop CSS Opacity From Affecting Child Elements

 / Published in: CSS
 

URL: http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

By default, applying opacity to an HTML element will make all of it's child elements (the content inside of the object) to also get the opacity style applied to it. Here's a clever example of how to override that rendering output in browsers.

The solution is to create a wrapper and apply absolute positioning to a child element of the wrapper.

Expand | Embed | Plain Text 
  1. #alpha_wrapper {
  2. 	width: 540px;
  3. 	height: 360px;
  4. 	float: left;
  5. 	position: relative;
  6. 	color: #fff;
  7. }
  8.  
  9. 	#alpha_2 {
  10. 		background: transparent url(bicycle.jpg) no-repeat 0 0;
  11. 		width: 540px;
  12. 		height: 440px;
  13. 		float: left;
  14. 		filter: alpha(opacity=30);
  15. 		-moz-opacity: 0.3;
  16. 		-khtml-opacity: 0.3;
  17. 		opacity: 0.3;
  18. 	}
  19.  
  20. 	#text_holder_2 {
  21. 		background: blue;
  22. 		position: absolute;
  23. 		top: 20px;
  24. 		left: 20px;
  25. 		width: 500px;
  26. 	}

Report this snippet  

You need to login to post a comment.