Từ khóa màu CSS
Trang này sẽ giải thích các từ khóa transparent
, currentcolor
và inherit
.
Từ khóa minh bạch
Từ khóa transparent
đượ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ử.
Ví 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;
}
Hãy tự mình thử » Lưu ý: Từ khóa transparent
tương đương với rgba(0,0,0,0). Giá trị màu RGBA là phần mở rộng của giá trị màu RGB với kênh alpha - kênh này chỉ định độ mờ cho màu. Đọc thêm trong chương CSS RGB và trong chương Màu CSS của chúng tôi.
Từ khóa màu hiện tại
Từ khóa currentcolor
giống như một biến chứa giá trị hiện tại của thuộc tính color 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 thành phần hoặc một trang.
Ví 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;
}
Hãy tự mình thử »Ví 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;
}
Hãy tự mình thử »Ví 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ử nội dung:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}
Hãy tự mình thử »Từ khóa kế thừa
Từ khóa inherit
chỉ định rằng một thuộc tính sẽ kế thừa giá trị của nó từ phần tử cha của nó.
Từ khóa inherit
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.
Ví dụ
Trong ví dụ này, cài đặt đường viền của <span> sẽ được kế thừa từ phần tử gốc:
div {
border: 2px solid red;
}
span {
border:
inherit;
}
Hãy tự mình thử »