IMG-LOGO
Home Tutorials CSS3

CSS3 Opacity

andy - 09 May, 2014 4230 Views 1 Comment

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.

Share:
Facebook Twitter

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.

Related Blogs

How to draw a circle in CSS?

CSS3
22 Oct, 2019
In this article, we are going to learn how to draw a circle in CSS. Firstly what needs to do is to create a CSS class called circle.

Related Tutorials

Media Queries

CSS3
28 Jun, 2014
Learn how to use media queries in CSS3 Media queries are simple conditions used to targetting different devices for tables phones or desktop computers As each device may have different view size media queries become so handy to use to ...

CSS3 Border Radius

CSS3
15 Aug, 2013
With new CSS3 border radius style you can easily create rounded corners for an image or html tag object Back in old days when we want to create a rounded border around an image or object we usually create 4 ...

CSS3 Multiple Column

CSS3
14 May, 2014
Learn how to use multiple column property in CSS3 To create multiple columns in CSS3 is now so handy you just need to include a css built in keyword column count to do the job for you No more table ...

CSS3 Box Sizing

CSS3
13 May, 2014
Learn how to use box sizing property in CSS3 As you know many browsers treat margin and padding differently When you combine with width or height of an element box you find out that the final dimension is completely different ...

Advanced Selectors

CSS3
28 Jun, 2014
Learn how to use advanced selectors in CSS3. By using the built in pseudo-class, performing a selector in CSS3 is so much easy.