background-clip

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

background-clip 은 배경색과 배경그림 위치의 기준을 지정합니다.

예제 1
background-clip 속성에 따른 배경색 표시 개요
보기
기본값
background-clip : border-box
background-clip : padding-box
background-clip : content-box
소스
<style type="text/css">
    .css_test {
        background : #FF75BA;
        border : 10px dashed #B7005B;
        padding : 30px;
        text-align : center;
        line-height : 100px !important;
        font-size : 12pt;
    }
</style>

<div class="css_test">기본값</div>
<div class="css_test" style="background-clip:border-box;">background-clip : border-box</div>
<div class="css_test" style="background-clip:padding-box;">background-clip : padding-box</div>
<div class="css_test" style="background-clip:content-box;">background-clip : content-box</div>
사용된 CSS (클릭시 보기) : backgroundbackground-clipborderfont-sizeline-heightpaddingtext-align
설명

아래 설명은 배경색을 지정할때 적용되는 방법입니다.

- background-clip : border-box 기본값 입니다.
테두리를 포함하여 배경색을 지정합니다.
하지만 테두리의 모양이 점선과 같은 빈 공간이 있는 경우만 눈으로 확인할 수 있습니다.
참고 : border-style

- background-clip : padding-box 테두리를 포함하지 않고 배경색을 지정합니다.
padding 부터 포함한다 라고 이해하면 쉽습니다.
 
- background-clip : content-box padding 영역은 포함하지 않고 배경색을 지정합니다.
순수 내용이 나오는 영역입니다.


아래 예제로 직접 해보세요 ^^

예제 2
실습 - background-clip 조절해 보기
보기
^.^
^.^
^.^
background-clip :
background-clip : border-box
설명
- 직접 해보시면 이해하기 쉽습니다.
- 위 사각형 안에는 적절한 padding 값이 지정되어 있습니다.
예제 3
실습 - background-clip 으로 배경그림 조절해 보기
보기
CSS 공작소
background-clip :
background-clip : border-box
설명
- 배경그림도 적용이 되는군요.
- 참고 : 위의 글자 그림자 효과는 text-shadow 입니다.
연구 1
혹시 border-radius 에 영향을 받을까요?
보기
^.^
소스
<style type="text/css">
    .css_test {
        display : inline-block;
        font-size : 12pt;
        line-height : 80px !important;
        margin : 3px;
        text-align : center;
        width : 100px;
        border-radius : 20px;
    }
    .css_test.s1 {
        background : #FF75BA;
        background-clip : content-box;
        border : 10px solid #B7005B;
        padding : 30px;
    }
</style>

<center>
    <div class="css_test s1">^.^</div>
</center>
사용된 CSS (클릭시 보기) : backgroundbackground-clipborderborder-radiusdisplayfont-sizeline-heightmarginpaddingtext-alignwidth
설명
안 받네요 ^^;
+ 관련 CSS +
☞ 목록으로 가기
CSS 공작소  /   jQuery 공작소