background-clip 속성

 

background-clip

background-clip은 배경범위를 어디까지 설정할지를 조절하는 css입니다.

 

background-clip 속성

border-box

박스 모델의 가장 외곽인 테두리(board)까지 배경을 적용

background-clip: border-box;

.bg {
    background: url("../img/bike.jpg");
    background-clip: border-box;
    border: 10px dashed;
    padding: 30px;
    font-size: 50px;
    font-weight: 600;
    color: #fff;
}

border에 배경이 들어가있는 지 확인하기 위해 border 속성을 dashed로 주면 border 영역까지 배경이미지가 들어간걸 확인 할 수 있다.

---

 

padding-box

테두리를 제외한 패딩까지 배경 적용

background-clip: padding-box;

.bg {
    background: url("../img/bike.jpg");
    background-clip: padding-box;
    border: 10px dashed #000; 
    padding: 30px;
    font-size: 50px;
    font-weight: 600;
    color: #fff;
}

 

 

content-box

내용만 배경을 적용

background-clip: content-box;

.bg {
    background: url("../img/bike.jpg");
    background-clip: content-box;
    border: 10px dashed #000;
    padding: 30px;
    font-size: 50px;
    font-weight: 600;
    color: #fff;
}

 

 

 

text

text 영역에 배경을 적용

background-clip: text;
-webkit-background-clip:
text; color: transparent;

.bg {
    background: url("../img/bike.jpg");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    border: 10px dashed;
    padding: 30px;
    font-size: 50px;
    font-weight: 600;
}

text에 배경을 적용할때는 text color 값을 투명하게 만들어줘야 합니다.

 

 

호환성 보기

 

 

 

※ 참조사이트 : https://developer.mozilla.org/ko/docs/Web/CSS/background-clip