CSS 색상 키워드

이 페이지 transparent에서는 currentcolor, 및 inherit키워드에 대해 설명합니다.

투명한 키워드

transparent키워드는 색상을 투명하게 만드는 데 사용됩니다 . 이것은 요소의 투명한 배경색을 만드는 데 자주 사용됩니다.

여기서 <div> 요소의 배경색은 완전히 투명하고 배경 이미지는 다음을 통해 표시됩니다.

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

div {
background-color: transparent;
}

참고: 키워드 transparent 는 rgba(0,0,0,0)와 동일합니다. RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이 있는 RGB 색상 값의 확장입니다. CSS RGB 장과 CSS Colors 장에서 더 많은 것을 읽으십시오 .

currentcolor키워드는 요소의 색상 속성의 현재 값을 보유하는 변수와 같습니다 .

이 키워드는 특정 색상을 요소나 페이지에서 일관되게 유지하려는 경우에 유용할 수 있습니다.

이 예에서 <div> 요소의 텍스트 색상이 파란색이기 때문에 <div> 요소의 테두리 색상은 파란색이 됩니다.

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

이 예에서 <div>의 배경색은 body 요소의 현재 색상 값으로 설정됩니다.

body {
color: purple;
}

div {
background-color: currentcolor;
}

이 예에서 <div>의 테두리 색상과 그림자 색상은 body 요소의 현재 색상 값으로 설정됩니다.

body {
color: green;
}

div {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
}

inherit키워드는 속성이 부모 요소에서 값을 상속해야 함을 지정합니다 .

키워드 는 inherit모든 CSS 속성과 HTML 요소에 사용할 수 있습니다.

이 예에서 <span>의 테두리 설정은 상위 요소에서 상속됩니다.

div {
border: 2px solid red;
}

span {
border: inherit;
}