CSS Opacity

CSS Opacity
Nikhil
Published on 2021-07-08 14:47:02

Opacity Property


An element's opacity can be set using the opacity property. Values can be anywhere from 0.0 (transparent) to 1.0 (opaque).

Example Usage

<div style="opacity:0.8;">
This is a partially transparent element
</div>

Property Value Transparency

  • opacity: 1.0; Opaque
  • opacity: 0.75; 25% transparent (75% Opaque)
  • opacity: 0.5; 50% transparent (50% Opaque)
  • opacity: 0.25; 75% transparent (25% Opaque)
  • opacity: 0.0; Transparent

IE Compatibility for `opacity`


To use opacity in all versions of IE, the order is:

.transparent-element {
/* for IE 8 & 9 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // IE8
/* works in IE 8 & 9 too, but also 5, 6, 7 */
filter: alpha(opacity=60); // IE 5-7
/* Modern Browsers */
opacity: 0.6;
}

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website