Từ khóa màu CSS

Chương này sẽ giải thích transparentcurrentcolorinherit 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;
}

Try It Yourself

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;
}

Try It Yourself

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;
}

Try It Yourself

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;
}

Try It Yourself

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;
}

Try It Yourself