<div>codingEverybody</div>
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 데모 버튼을 클릭해 보세요!
box model
요소 박스의 Box model
selector {
    background-origin: [ border-box | padding-box | content-box ] || Global values
    /*
        Global values:
        inherit | initial | revert | revert-layer | unset
    */
    -webkit-background-origin: text;
}
/*
    Webkit 기반의 브라우저에서
    background-clip: text는 지원하지 않습니다.
    vendor prefix인 '-webkit-'을 포함하여 사용해야 합니다.
*/
-webkit-background-clip: text;
selector {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    /* 텍스트의 배경이 보이려면
       텍스트의 색상은 투명(transparent)해야 합니다. */
}
<div>TEXT</div>
div {
    font-size: 50px;
    font-weight: 900;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(red, blue);
}
실제 적용 모습

마지막 업데이트 정보: 2023-12-12

background-clip 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
background-clip 1 12 4 5
4 -webkit-
text 3 -webkit- 79 -webkit- 49 4 -webkit-

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