<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);
}
실제 적용 모습

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