background-clip

background-clip

background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.

---

background-clip

background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.

특징	설명
기본 값	background-clip : border-box
적용	background
버전	CSS1
사용성	★★☆☆☆

정의(Definition)

• background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.
• clip은 걸다, 끼우다의 뜻으로 background-clip 배경 이미지를 어디에 설정하지를 설정합니다.
• background-clip 기준점은 보더(border), 패딩(padding), 컨텐츠, 텍스트(text)에 설정할 수 있습니다.
• 텍스트(text)속성은 베타 버전이기 때문에 접두사(-webkit)을 표현해야 합니다.(2021년 기준)

비교(Compare)

• background-origin 속성은 백그라운드 이미지의 위치 기준점을 통해 설정되며, 이미지가 그대로 유지됩니다.
• background-clip 속성은 백그라운드 이미지의 위치 기준점을 통해 설정되며, 이미지가 편집됩니다.

백그라운드와 관련된 속성(Background Related Properties)

• background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
• background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
• background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
• background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-color 속성은 백그라운드 색을 설정합니다.
• background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
• background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
• background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
• background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.

문법(Syntax)

background-clip : border-box | padding-box | content-box | text

 /* 기본 속성 */
background-clip : border-box;
background-clip : padding-box;
background-clip : content-box;
background-clip : text; 

속성(Property)

속성값	설명
border-box	백그라운드 속성이 테두리 영역까지 포함하여 표현됩니다.
padding-box	백그라운드 속성이 테두리 영역을 제외하여 표현됩니다.
content-box	백그라운드 속성이 내부 컨텐츠 영역까지 표현됩니다.
text	텍스트 영역에 백그라운드 이미지가 표현됩니다.

예제1(Sample)

백그라운드 배경이미지(background-clip)의 고정 여부를 설정하는 예제입니다.

background-clip

background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; -webkit-background-clip: text; color: transparent;

HTML

CSS

SCRIPT

<div class="background-box">
    <div class="box">
        <h2>background-clip</h2>
    </div>
</div>

.background-box .box {
    background-image: url(h../images/hover04.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-clip: border-box;
    max-width: 400px;
    height: 400px;
    border: 10px dotted #000;
    padding: 20px;
}

//Javascript none

예제2(Sample)

백그라운드 이미지(background-origin)의 기준점을 설정하는 예제입니다.

background-origin

background-origin: border-box; background-origin: padding-box; background-origin: content-box;

HTML

CSS

SCRIPT

<div class="background-box">
    <div class="box">
        <h2>background-origin</h2>
    </div>
</div>

.background-box .box {
    background-image: url(../images/hover04.jpg);
    background-repeat: no-repeat;
    background-origin: border-box;
    max-width: 400px;
    height: 400px;
    border: 10px dotted #000;
    padding: 20px;
}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
background-clip	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○
border-box	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○
padding-box	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○
content-box	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○

참고 사이트(Reference)

• MDN
• W3C

---