CSS: Opacity without effecting child elements

Just thought I’d write down how to add opacity to an element without having it effect the child elements. If you just set opacity to an element then all child elements will have the same opacity. So, instead of opacity use rgba and set the opacity as the fourth parameter as in this example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" >
		<title>CSS: Use opacity without having it effect its children</title>
		<style type="text/css">
			* { margin: 0; padding: 0; } 
			body
			{
				background: transparent url(http://maffelu.net/test/css/opacity_child_elements/simple_tiled_background.jpg) repeat top left;
			}
			
			#wrapper
			{
				background-color: rgba(255, 255, 255, 0.7);
				width: 800px;
				margin: 20px auto;
				padding: 20px;
			}
			
			#wrapper > div
			{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<h2>This is a CSS example</h2>
			<div>
				Test text
			</div>
		</div>
	</body>
</html>

This is what it could look like. I’ve added a horrible tiled background to make the opacity more visible (you can also see a real example here):

An opacity example
An opacity example

Leave a Reply