#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;
	}

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.

Stop CSS Opacity From Affecting Child Elements

CSS