/ Published in: CSS
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.
The solution is to create a wrapper and apply absolute positioning to a child element of the wrapper.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
#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; }
URL: http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html