opacity

opacity là gì?

Trước đây để làm trong suốt một đối tượng nào đó, thì ta cần phải sử dụng hình ảnh với định dạng PNG hoặc GIF, nhưng với CSS3 thì việc này vô cùng đơn giản, chỉ với thuộc tính opacity là bạn đã hiệu chỉnh được độ trong suốt bất kỳ thành phần nào một cách dễ dàng.

Cấu trúc

tag {
    opacity: giá trị;
}
Giá trị Đơn vị VD Mô tả
Giá trị 0.6 opacity: 0.6; Có giá trị từ 0 tới 1.
  • 0: trong suốt hoàn toàn
  • 1: không trong suốt

Cách sử dụng

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>
<p class="text">Nội dung bên dưới</p>
<p class="image"><img src="images/img_sakura.jpg" alt=""></p>
</div>
</body>
</html>

CSS viết - khi chưa sử dụng opacity:

div {
    height: 140px;
    position: relative;
}
div .text {
    color: #000;
    font-size: 30px;
    font-weight: bold;
}
div .image {
    left: 0;
    position: absolute;
    top: 0;
}

Hiển thị trình duyệt:

Nội dung bên dưới

Bây giờ ta sẽ sử dụng opacity để xem kết quả như thế nào nhé:

CSS viết:

div {
    height: 140px;
    position: relative;
}
div .text {
    color: #000;
    font-size: 30px;
    font-weight: bold;
}
div .image {
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 0;
}

Hiển thị trình duyệt:

Nội dung bên dưới

Ta thấy tấm hình đã được trong suốt, và có thể thấy nọi dung text bên dưới. Để hiểu rõ hơn về opacity, ta xem thêm ví dụ sau:

Ví dụ thêm - Một số opacity thường dùng

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<p class="image01"><img src="images/img_sakura.jpg" alt=""></p>
<p class="image02"><img src="images/img_sakura.jpg" alt=""></p>
<p class="image03"><img src="images/img_sakura.jpg" alt=""></p>
<p class="image04"><img src="images/img_sakura.jpg" alt=""></p>
</body>
</html>

Thay đổi giảm dần giá trị opacity

p { margin-bottom: 5px; }
.image01 { opacity: 1; }
.image02 { opacity: 0.7; }
.image03 { opacity: 0.4; }
.image04 { opacity: 0.1; }

Các bạn có thể xem thêm tại tham khảo opacity.

text-shadow

Color transparence