The opacity attribute determines the opacity and transparency of an element.

Transparency of images

The opacity attribute can get values ​​from 0.0 to 1.0 , the smaller the value, the more transparency.

Opacity / Transparency property in CSS Picture 1

Note : Internet Explorer 8 and earlier versions use filter: alpha (opacity = x). x can be from 0 to 100. The lower the value, the more transparent the element is.

 img { 
 opacity: 0.5; 
 filter: alpha(opacity=50); /* sử dụng cho IE8 trở về trước */ 
 } 

Opacity / Transparency property in CSS Picture 2

Transparency of images

The smaller the opacity attribute value, the more transparency.

Image with 80% opacity transparent:

Transparent effect when dragging

The opacity attribute is often used with : hover to change the transparency of the image when hovering over.

 img { 
 opacity: 0.5; 
 filter: alpha(opacity=50); /* sử dụng cho IE8 trở về trước */ 
 } 
 
 img:hover { 
 opacity: 1.0; 
 filter: alpha(opacity=100); /* sử dụng cho IE8 trở về trước */ 
 } 

For example:

Opacity / Transparency property in CSS Picture 3

Transparency of images

The opacity attribute is often used with: hover to change transparency
of the image when hovering over.

In the above example, the first CSS fragment is similar to the code in example 1 and adds the effect when the user moves the mouse over one of the images, the image becomes clear. Also, you can leave the original image with the clear opacity of 1.0 by default, after hovering over, the image will fade as follows:

Transparency of images

The opacity attribute is often used with: hover to change transparency
of the image when hovering over.

Transparent Box

When using the opacity attribute to add opacity to an element's background, all child elements will inherit that opacity. This makes the text inside the element with high opacity difficult to read:

 div { 
 opacity: 0.3; 
 filter: alpha(opacity=30); /* sử dụng cho IE8 trở về trước */ 
 } 

Opacity / Transparency property in CSS Picture 5

Transparent Box uses RGBA

If you don't want to apply opacity to child elements like in the example above, you can use RGBA color values. For example, just set the opacity for the background color, not set for text:

 div { 
 background: rgba(128, 0, 128, 0.3) /* Nền màu tím với 30% opacity */ 
 } 

Opacity / Transparency property in CSS Picture 7

Marvin Fry

Update 25 May 2019