- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- Color transparence
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:
Nội dung text bên dưới
Color
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:
Nội dung text bên dưới
Background
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.
1] Thuộc tính background-color trong CSS
- Thuộc tính background-color dùng để thiết lập "màu nền" của phần tử HTML.
- Ví dụ:
Phần tử này được thiết lập nền màu vàng
- Lưu ý: Đối với một phần tử HTML, phần diện tích được thiết lập màu nền sẽ bao gồm các phần:
- border.
- padding.
- content.
- [không bao gồm phần margin]
2] Cách sử dụng thuộc tính background-color trong CSS
- Để sử dụng thuộc tính background-color, ta dùng cú pháp như sau:
background-color: color|transparent|initial|inherit;
- Trong đó, ta thấy giá trị của thuộc tính background-color có thể được xác định bởi một trong bốn loại:
color | - Một giá trị màu cụ thể, nó có thể là:
| Xem ví dụ |
transparent | - Nền của phần tử sẽ có màu trong suốt. - Lưu ý: Nền trong suốt khác với nền màu trắng. Màu nền của phần tử trong suốt sẽ bị ảnh hưởng bởi màu nền của phần tử chứa nó. | Xem ví dụ |
initial | - Sử dụng giá trị mặc định của nó. - Lưu ý: Mặc định thì nền của một phần tử sẽ có màu trong suốt, cho nên nó sẽ có ý nghĩa tương tự như giá trị transparent. | Xem ví dụ |
inherit | - Kế thừa giá trị thuộc tính background-color từ phần tử cha của nó | Xem ví dụ |
- Ngoài ra, thuộc tính background-color cũng thường được dùng để chỉnh màu nền cho văn bản.
Tài liệu hướng dẫn học Lập Trình Web.
Xem ví dụ