Opacity CSS: Opacity // Transparency Property in CSS

Opacity CSS: Opacity // Transparency Property in CSS is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

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.

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 */ 
 } 

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 instance,:

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 */ 
 } 

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 instance,, 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 */ 
 }