Từ khóa màu CSS
Trang này sẽ giải thích transparent, currentcolorvà
inherittừ khóa.
Từ khoá minh bạch
Từ transparentkhóa được sử dụng để làm cho màu trong suốt. Điều này thường được sử dụng để tạo màu nền trong suốt cho một phần tử.
Thí dụ
Ở đây, màu nền của phần tử <div> sẽ hoàn toàn trong suốt và hình nền sẽ hiển thị thông qua:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
Lưu ý: Từ transparent
khóa tương đương với rgba (0,0,0,0). Giá trị màu RGBA là phần mở rộng của các giá trị màu RGB với kênh alpha - chỉ định độ mờ cho một màu. Đọc thêm trong chương CSS RGB của chúng tôi và trong chương Màu sắc CSS của chúng tôi .
Từ khóa màu hiện tại
Từ currentcolorkhóa giống như một biến giữ giá trị hiện tại của thuộc tính màu của một phần tử.
Từ khóa này có thể hữu ích nếu bạn muốn một màu cụ thể nhất quán trong một phần tử hoặc một trang.
Thí dụ
Trong ví dụ này, màu đường viền của phần tử <div> sẽ là màu xanh lam, vì màu văn bản của phần tử <div> là màu xanh lam:
div {
color: blue;
border: 10px solid currentcolor;
}
Thí dụ
Trong ví dụ này, màu nền của <div> được đặt thành giá trị màu hiện tại của phần tử nội dung:
body {
color: purple;
}
div {
background-color:
currentcolor;
}
Thí dụ
Trong ví dụ này, màu đường viền và màu bóng của <div> được đặt thành giá trị màu hiện tại của phần tử body:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}
Từ khoá kế thừa
Từ inheritkhóa chỉ định rằng một thuộc tính sẽ kế thừa giá trị của nó từ phần tử mẹ của nó.
Từ inheritkhóa có thể được sử dụng cho bất kỳ thuộc tính CSS nào và trên bất kỳ phần tử HTML nào.
Thí dụ
Trong ví dụ này, cài đặt đường viền của <span> sẽ được kế thừa từ phần tử mẹ:
div {
border: 2px solid red;
}
span {
border:
inherit;
}