20/07/2019, 10:00
opacity là gì?
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 ...
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.
|
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
