Advanced Search

Return to Snippet

Revision: 16401
at August 3, 2009 07:35 by jonhenshaw
Initial Code 
#alpha_wrapper {
	width: 540px;
	height: 360px;
	float: left;
	position: relative;
	color: #fff;
}

	#alpha_2 {
		background: transparent url(bicycle.jpg) no-repeat 0 0;
		width: 540px;
		height: 440px;
		float: left;
		filter: alpha(opacity=30);
		-moz-opacity: 0.3;
		-khtml-opacity: 0.3;
		opacity: 0.3;
	}

	#text_holder_2 {
		background: blue;
		position: absolute;
		top: 20px;
		left: 20px;
		width: 500px;
	}
Initial URL 
http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html
Initial Description 
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.
Initial Title 
Stop CSS Opacity From Affecting Child Elements
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS