Ngôn ngữ CSS - CSS Opacity
Bài trước
Bài sau

CSS opacity (độ mờ)

Dùng thuộc tính opacity để tạo độ mờ hay độ trong cho phần tử html (có thể là hình, background)

Độ mờ của một phần tử được quy định từ 0 đến 1 
Cú pháp:

tagName {
    opacity: giá trị;
}

opacity có các giá trị như sau:

giá trị Ví dụ Mô tả
giá trị opacity: 0.3; Độ trong suốt của thành phần phụ thuộc vào giá trị.
inherit opacity: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ:

<html>
<head>
   <style type="text/css">
      p{
         font-size:20px;
         padding:20px;
         background-color:red;
      }
   </style>
</head>
<body>
   <p style="opacity:1">Opacity: 1</p>
   <p style="opacity:0.8">Opacity: 0.8</p>
   <p style="opacity:0.6">Opacity: 0.6</p>
   <p style="opacity:0.4">Opacity: 0.4</p>
   <p style="opacity:0.2">Opacity: 0.2</p>
   <p style="opacity:0">Opacity: 0</p>
</body>
</html>

Xem ví dụ

Ví dụ: Làm mờ hình theo dạng chuyển dần độ mờ

<!DOCTYPE html>  
<html>  
<head>  
<style>  
img.trans {  
    opacity: 0.4;  
    filter: alpha(opacity=40); /* For IE8 and earlier */  
}  
</style>  
</head>  
<body>  
<p>Hình ban đầu</p>  
<img src="images/rose.jpg" title="normal rose">  
<p>Hình Transparent</p>  
<img class="trans" src="images/rose.jpg" alt="transparent rose">  
</body>  
</html>

Xem ví dụ

Các trình duyệt: Chrome, Firefox, Opera, Safari và IE9 sử dụng thuộc tính opacity để chuyển độ mờ. Giá trị độ mờ dao động từ 0,1 đến 1,0. Giá trị thấp sẽ tạo ra độ mờ lớn hơn.

Các phiên bản IE cũ : alpha (opacity = x). Giá trị x ở đây thay đổi từ 0 đến 100. Giá trị thấp hơn sẽ tạo ra độ mờ lớn hơn.


Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×