기초) background-origin/clip

 

 

 

 

 

{ background-origin: ;}

 

 

 

 

선택한 이미지를 박스 안

어디까지 채워 넣을지

설정하는 기능

 

넣을 수 있는 값은 총 3가지

 

 

1. padding-box;

기본 설정으로

padding까지

이미지가 들어간다

 

 

2. border-box;

보더까지 이미지가 들어간다

 

 

3. content-box;

컨텐츠(text)의 영역만큼

이미지가 들어간다.

 

 

---

 

 

{ background-clip: ;}

 

 

선택한 이미지의배경 색을

박스 안 어디까지 채워 넣을지

설정하는 기능

 

넣을 수 있는 값은 총 3가지로

origin과 동일

 

 

 

---

 

 

샘플 코드

 

  <style>
    body {
      padding: 50px;
      background: ;
    }

    div {
      width: 500px; height: 500px; padding: 20px;
      border: 20px solid rgba(0, 0, 0, 0.5);
      background: url(images.PNG) no-repeat red;
      background-size : 500px 250px;
      background-origin: content-box;
      background-clip : content-box;
    }
  </style>

  <div>test</div>