Từ khóa màu CSS
Chương này sẽ giải thích transparent
、currentcolor
và inherit
Từ khóa.
Từ khóa transparent
transparent
Từ khóa được sử dụng để làm màu trong suốt. Thường được sử dụng để thiết lập màu nền trong suốt cho yếu tố.
Example
Ở đây, màu nền của yếu tố <div> sẽ hoàn toàn trong suốt, và hình ảnh nền sẽ hiển thị ra:
body { background-image: url("paper.gif"); } div { background-color: transparent; }
Lưu ý:transparent
Từ khóa tương đương rgba(0,0,0,0)
。Giá trị màu RGBA là mở rộng của giá trị màu RGB, có kênh alpha - nó xác định độ trong suốt của màu. Thông tin chi tiết hơn, xin xem CSS RGB Chương và Màu CSS Chương.
Từ khóa currentcolor
currentcolor
Từ khóa tương tự như một biến, nó lưu trữ giá trị hiện tại của thuộc tính màu của yếu tố.
Nếu bạn muốn một màu cụ thể được duy trì nhất quán trong yếu tố hoặc trang web, từ khóa này sẽ rất hữu ích.
Example
Trong ví dụ này, màu viền của yếu tố <div> sẽ là màu xanh lá cây, vì màu văn bản của yếu tố <div> là màu xanh lá cây:
div { color: blue; border: 10px solid currentcolor; }
Example
Trong ví dụ này, màu nền của thẻ <div> được thiết lập thành giá trị màu hiện tại của yếu tố body:
body { color: purple; } div { background-color: currentcolor; }
Example
In this example, the border color and shadow color of <div> are set to the current color value of the body element:
body { color: green; } div { box-shadow: 0px 0px 15px currentcolor; border: 5px solid currentcolor; }
inherit keyword
inherit
The keyword specifies that the attribute should inherit its value from its parent element.
inherit
Keywords can be used for any CSS attribute and can be used for any HTML element.
Example
In this example, the border setting of <span> will be inherited from the parent element:
div { border: 2px solid red; } span { border: inherit; }