background-clip 속성 사용법

background-clip 속성은
요소의 배경(색상이나 이미지)이 어느 부분까지 차지할 지를 설정합니다.
border-box, padding-box, content-box, text 중 하나를 선택하여 배경이 차지(클리핑(오려냄), clipping)할 영역으로 지정합니다.

데모 HTML 
<div>codingEverybody</div>
데모 CSS 
div {
    font-size: 2em;
    font-weight: 900;
    text-align: center;
    padding: 30px;
    border: 10px dashed red;
    background-image: url("flower.jpg");
    background-position: center;
    background-clip: border-box; /* 초깃값 */
}
데모 적용해 보기: background-clip 데모 버튼을 클릭해 보세요!

참고하세요!
요소의 배경(색상이나 이미지)은 항상 border 뒤에 그려집니다.

루트 요소인 <html>은 background-clip 속성을 지정해도 아무 효과가 없습니다.

값

background-clip 속성의 값
border-box 초깃값임.
요소의 배경이 border-box까지 차지(클리핑, clipping)합니다.
padding-box 요소의 배경이 padding-box까지 차지(클리핑, clipping)합니다.
content-box 요소의 배경이 content-box까지 차지(클리핑, clipping)합니다.
text 요소의 배경이 text까지 차지(클리핑, clipping)합니다.
이 값은 CSS3의 일부로 제안되었지만 아직 표준으로 채택되지 않았습니다. WebKit을 기반으로 하는 브라우저와 Firefox 브라우저에서 지원합니다.

background-clip 속성의 값에 대한 용어 설명은 다음과 같습니다.

  • border-box: border의 가장자리까지의 영역을 의미합니다.
  • padding-box: padding의 가장자리까지의 영역을 의미합니다.
  • content-box: 요소의 실제 내용이 위치하는 영역입니다. 글자, 이미지, 동영상 등이 여기에 포함됩니다. 이러한 콘텐츠 가장자리까지의 영역을 의미합니다.
  • text: 요소의 텍스트를 의미합니다.

이 용어들은 요소 박스의 Box model을 통해 확인할 수 있습니다.

box model
요소 박스의 Box model

CSS의 Box model은 웹 페이지에서 요소의 구조와 레이아웃을 정의하는 개념입니다. 각 HTML 요소는 content(내용), padding(패딩), border(테두리), margin(마진)으로 구성되어 있습니다. 이러한 구성 요소들이 상자 모양을 이루어서 "Box model"이라고 불립니다.

구문과 정의

CSS 
selector {
    background-origin: [ border-box | padding-box | content-box ] || Global values
    /*
        Global values:
        inherit | initial | revert | revert-layer | unset
    */
    -webkit-background-origin: text;
}
background-clip 속성의 정의
초깃값 border-box
적용 요소 모든 요소
상속 아니오

background-clip: text; 사용하기

background-clip 속성의 값 중에서 text는 CSS3의 일부로 제안되었지만 아직 표준으로 채택되지 않았습니다.

하지만, WebKit을 기반으로 하는 브라우저와 Firefox 브라우저에서 지원합니다.

background-clip: text;를 사용할 때 브라우저 호환성을 위해서 WebKit을 기반으로 하는 브라우저에서는 속성에 vendor prefix인 -webkit-을 포함한 속성을 사용해야 합니다. 브라우저 호환성을 참조하세요.

CSS 
/*
    Webkit 기반의 브라우저에서
    background-clip: text는 지원하지 않습니다.
    vendor prefix인 '-webkit-'을 포함하여 사용해야 합니다.
*/
-webkit-background-clip: text;

Firefox 브라우저에서는 vendor prefix 없는 background-clip: text;를 지원합니다.

따라서, 브라우저 호환성을 고려해서 background-clip: text;를 사용할 경우에는 다음과 같이 사용하면 됩니다.

CSS 
selector {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    /* 텍스트의 배경이 보이려면
       텍스트의 색상은 투명(transparent)해야 합니다. */
}

예제 - 텍스트에 그라디언트 효과 주기

HTML 
<div>TEXT</div>
HTML <div> 태그 - 올바른 이해와 사용 방법
CSS 
div {
    font-size: 50px;
    font-weight: 900;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(red, blue);
}
실제 적용 모습
background-clip 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
background-clip 1 12 4 5
4 -webkit-
text 120
3 -webkit-		 120
79 -webkit-		 49 14
4 -webkit-

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

background-clip 속성의 명세서 사양
명세서 사양
background-clip CSS Backgrounds and Borders Module Level 3
#background-clip

참고문헌

같이 보기