Color transparence là gì?
Color transparence là màu trong suốt, ví dụ như khi sử dụng background-color transparence thì background sẽ có độ trong suốt, và có thể thấy đối tượng bên dưới. Để tạo một màu có độ trong suốt như vậy ta cần khai báo hệ màu RGBA (red green blue alpha).
Cấu trúc
tag {
color: rgba(n1, n2, n3, độ trong suốt);
background-color: rgba(n1, n2, n3, độ trong suốt);
}
- Với n1, n2, n3 có giá trị từ 0 tới 255, tương ứng với màu đen tới trắng.
- Độ trong suốt: có giá trị từ 0 tới 1 (với 1 là không trong suốt).
Color transparence
HTML viết:
<!DOCTYPE HTML> <html> <head></head> <body> <div> <p class="text">Nội dung text bên dưới</p> <p class="color">Color</p> </div> </body> </html>
CSS viết - khi chưa sử dụng transparence:
div {
height: 140px;
position: relative;
}
div .text {
color: #000;
font-size: 30px;
font-weight: bold;
}
div .color {
color: #7ACAFF;
font-size: 80px;
font-weight: bold;
left: 0;
position: absolute;
top: -40px;
}
Hiển thị trình duyệt khi chưa có transparence:
Nội dung text bên dưới
Color
Ta thấy nội dung "Color" nằm bên trên và che đoạn text bên dưới, ta không thể thấy nội dung bên dưới được, bây giờ ta sẽ sử dụng color transparence để xem kết quả thay đổi như thế nào nhé:
CSS viết:
div .color {
color: rgba(122, 202, 255, 0.7);
font-size: 80px;
font-weight: bold;
left: 0;
position: absolute;
top: -40px;
}
Hiển thị trình duyệt:
Nội dung text bên dưới
Color
Ta thấy rõ kết quả khá ấn tượng với cách dùng đơn giản như trên, các giá trị 122, 202, 255 chính là hệ màu RGB của #7ACAFF, hệ màu này thường sử dụng tool để biết, chứ không có cách nhớ chi tiết được, các bạn có thể tham khảo thêm tại Công cụ tạo color Transparence.
Background transparence
Ta đã biết color transparence là gì, bây giờ ta sẽ làm background transparence tương tự để hiểu rõ hơn về transparence là gì, xét ví dụ sau:
HTML viết:
<!DOCTYPE HTML> <html> <head></head> <body> <div> <p class="text">Nội dung text bên dưới</p> <p class="color">Background</p> </div> </body> </html>
CSS viết - khi chưa sử dụng transparence:
div {
height: 140px;
position: relative;
}
div .text {
color: #000;
font-size: 30px;
font-weight: bold;
}
div .color {
background-color: #C685FF;
height: 100px;
line-height: 100px;
text-align: center;
top: 0;
width: 200px;
}
Hiển thị trình duyệt khi chưa có transparence:
Nội dung text bên dưới
Background
Ta thấy nội dung "Background" nằm bên trên và che đoạn text bên dưới, bây giờ ta sẽ sử dụng background với color transparence để xem kết quả thay đổi như thế nào nhé:
CSS viết:
div .color {
background-color: rgba(198, 133, 255, 0.7);
height: 100px;
line-height: 100px;
text-align: center;
top: 0;
width: 200px;
}
Hiển thị trình duyệt:
Nội dung text bên dưới
Background
Tới đây chắc ta đã biết cách sử dụng transparence là như thế nào rồi, việc lấy mã màu, các bạn có thể tham khảo thêm tại Công cụ tạo color Transparence.