CSS background-clip: 배경 영역

Baseline넓은 지원

모든 주요 브라우저가 지원하는 기능입니다.

CSS background-clip 속성은 요소의 배경을 테두리 박스, 안쪽 여백 박스, 콘텐츠 박스, 텍스트 중 어디까지 표시할지 설정합니다.

#target {
  background-clip: border-box;
  /* background-clip: padding-box; */
  /* background-clip: content-box; */
  /* background-clip: text; color: transparent; */
}

#target {
  background-image: linear-gradient(45deg, limegreen, gold);
  border: 10px dotted;
  border-color: #0003;
  font-size: 24px;
  font-weight: bold;
  padding: 20px;
  height: 80px;
  text-align: center;
}

<div id="target">라임그린 골드 배경</div>

불러오는 중...

배경은 언제나 테두리 뒤에 그려지므로, background-clip: border-box는 테두리가 (반)투명하거나, 일부 (반)투명한 영역이 존재할 때만 시각적 효과가 생깁니다. 또한, background-clip: text는 텍스트가 완전히 불투명할 땐 거의 효과가 없습니다.

루트 요소는 다른 요소들과 다른 배경 페인팅 영역을 사용하므로 background-clip 속성을 지정해도 효과가 없습니다. Backgrounds of Special Elements를 참고하세요.

구문

selector {
  /* 키워드 값 */
  background-clip: border-box;
  background-clip: padding-box;
  background-clip: content-box;
  background-clip: text;
  background-clip: border-area;

  /* 전역 값 */
  background-clip: inherit;
  background-clip: initial;
  background-clip: revert;
  background-clip: revert-layer;
  background-clip: unset;
}

값

border-box: 배경이 테두리의 바깥 가장자리까지 그려집니다.
padding-box: 배경이 안쪽 여백의 바깥 가장자리까지 그려집니다. 테두리 아래에는 배경을 그리지 않습니다.
content-box: 배경이 콘텐츠 박스에서 잘립니다.
text: 배경이 텍스트의 글자 모양에 맞춰 잘립니다.
border-area: 배경이 테두리가 그려지는 영역에 맞춰 잘립니다. border-width와 border-style을 고려하지만 border-color의 투명도는 무시합니다.

접근성

background-clip: text를 사용할 땐 최종 텍스트 색이 뒤의 배경과 충분한 대비를 이뤄야 저시력 사용자들이 페이지 콘텐츠를 읽을 수 있습니다. 또한 배경을 이미지로 지정한 경우, 이미지 로딩이 실패하면 텍스트를 읽을 수 없게 됩니다. 예비 배경색을 추가하고, 이미지 없이도 텍스트가 잘 나오는지 확인하세요.

@supports를 사용해 background-clip: text가 지원되는지 기능 쿼리를 사용하고, 지원되지 않는 환경에서는 접근 가능한 대안을 제공하세요.

명세

CSS Backgrounds and Borders Module Level 3

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS		Android
	Safari	Chrome	Firefox	Safari	Safari WebView	Chrome	Android WebView	Firefox	Samsung Internet
`background-clip`
`border-area`
`border-box`
`content-box`
`padding-box`
`text`