Published on: 09 May, 2014

CSS3 Opacity

Tumblr Digg Google Plus

So what is actually opacity? CSS3 Opacity defines a transparency level of an element. The property value of opacity is range from 0 to 1.

CSS3 Opacity Example

Opacity applied at 0.7
Opacity applied at 0.4
<style type="text/css">
	.example1, .example2{
		padding:30px;
		text-align:center;
		opacity:0.7;
		background:#af1111;
		margin-bottom:20px;
	}

	.example2{
		opacity:0.4;
	}
</style>
<div class="example1">
	Opacity applied at 0.7
</div>

<div class="example2">
	Opacity applied at 0.4
</div>

CSS3 Opacity Generator

Alternatively, you can see our interactive demo by using our CSS3 Opacity Generator.

Comments

Mark
06 Apr, 2019
The problem with this is that all children will inherit opacity, too (the text). Better to use rgba() color values. For instance: .example1, .example2{ padding:30px; text-align:center; background-color: rgba(175, 17, 17, .7); //opacity is applied only to background color. margin-bottom:20px; } Now the text within that element will not inherit the opacity.
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.