[css3] background-clip 속성

 

 

[css3] background-clip 속성

 

background-clip은 배경을(배경색이나 이미지) 어디까지 색칠할지 지정하는 속성 입니다

 

background-clip를 그대로 해석하자면 '배경 이미지 자르기' 정도가 될 것 같습니다.
 

▶문법

 

background-clip: border-box|padding-box|content-box|initial|inherit;

 

border-box  : 기본값, border 즉 테두리 영역까지 배경을 칠함. (테두리 영역까지만 자름)

 

padding-box   :  padding 영역에까지 배경을 칠함.

content-box  : content 즉 내용 영역까지 배경을 칠함.

initial : 초기화

inherit : 상속

상속 여부: no

 

박스 모델 이해하기

 

 

▶ background-clip 속성 브라우저 지원 상세

 

ie9+, chrome 4.0+, firefox 4.0+, safari 3.0+, opera 10.5+

 

▶ 파이어폭스 3.6 접두어 버전 문법은:

 

-moz-background-clip:  border | padding | content

 

 

[css] 브라우저 업체별 접두어(vendor prefix)

 

 

▶ Safari에서 접두어 버전 문법은, 현재 키워드도 가능하며 다음도 가능함.

 

-webkit-background-clip:  border | padding | content

 

 

순서는 접두어 버전을 위에 쓰고, 표준 속성을 맨 아래 씀.

 

  -moz-background-clip: border;     /* Firefox 3.6 */
  -webkit-background-clip: border;  /* Safari 4? Chrome 6? */
  background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

 

 

참고: background-attachment: fixed로 설정하면 background-clip 속성이 적용되지 않음.

 

 

html/css 작성 예를 보겠습니다.

 

background-clip.html

 

html

 

<div id="test">
<h3>김춘수 꽃 </h3>

내가 그의 이름을 불러 준 것처럼<br>

나의 이 빛깔과 향기에 알맞는<br>

누가 나의 이름을 불러다오.<br>

그에게로 가서 나도<br>

그의 꽃이 되고 싶다.
</div>

 

 

 

css

 

#test
{
width: 200px;
background-color: #FFD9EC;
border: 10px dashed #FFB2F5;
padding: 20px;
margin: 20px;
background-clip: border-box;

} 

 

▶실행화면 

  

 

css

 

#test
{
width: 200px;
background-color: #FFD9EC;
border: 10px dashed #FFB2F5;
padding: 20px;
margin: 20px;
background-clip: padding-box;

} 

 

▶실행화면 

 

css

 

#test
{
width: 200px;
background-color: #FFD9EC;
border: 10px dashed #FFB2F5;
padding: 20px;
margin: 20px;
background-clip: content-box;

} 

 

▶실행화면 

 

 

 
https://developer.mozilla.org/ko/docs/Web/CSS/background-clip

 

http://css-tricks.com/transparent-borders-with-background-clip/

 

 

background 속성(배경 전체 지정) 

 

background-position 속성(배경이미지 위치 지정)

 

background-attachment 속성(배경이미지 고정)

 

background-repeat 속성(배경 이미지 패턴)