Color Keyword ng CSS

Ang bukasin ay magtuturo ng transparent、currentcolor At inherit Palatandaan

Palatandaan na transparent

transparent Ang palatandaan ay ginagamit upang gawing transparente ang kulay. Ito ay pangkaraniwang ginagamit para sa pagtatakda ng transparente na kulay ng background ng elemento.

Example

Dito, ang kulay ng background ng elemento ng <div> ay lubos na transparente at ang larawan ng background ay papakita:

body {
  background-image: url("paper.gif");
{}
div {
  background-color: transparent;
{}

Try It Yourself

Babala:transparent Ang palatandaan ay katumbas ng rgba(0,0,0,0)Ang halaga ng kulay na RGBA ay isang pagpapalawak ng RGB na may alpha channel—ito ay tinutukoy ng kawalan ng transparency ng kulay. Para sa mas maraming impormasyon, pagsusuri ang aming CSS RGB Buku at Kulay ng CSS Buku

Palatandaan na currentcolor

currentcolor Ang palatandaan ay katulad ng isang variable, na pinapag-imbak ang kasalukuyang halaga ng attribute ng kulay ng elemento.

Kung gusto mong mapanatili ang isang espesyal na kulay sa elemento o sa pahina, magiging mabuti ang gumamit ng palatandaan na ito.

Example

Sa kasong ito, ang kulay ng border ng elemento ng <div> ay magiging asul sa dahilang ang kulay ng teksto ng <div> ay asul:

div {
  color: blue;
  border: 10px solid currentcolor;
{}

Try It Yourself

Example

Sa kasong ito, ang kulay ng background ng <div> ay itinatag sa kasalukuyang kulay ng elemento ng 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 property 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