background-origin: content-box - 배경이 시작되는 위치를 content-box 영역부터 시작한다
background-origin: border-box - 배경이 시작되는 위치를 테두리 영역부터 시작한다
html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> div { background: url(images/tile.png); background-color: #FFA7A7; /* background-origin: content-box 배경이 시작되는 위치를 content-box에 맞춘다 */ background-origin: content-box; background-clip: content-box; padding: 30px; height: 300px; border: 1px solid #000; } </style> </head> <body> <div></div> </body> </html> | cs |
결과
배경이미지가 잘려서 보였는데 배경이미지를 content-box에 맞춰서 보여주므로 배경이미지가 정확히 보인다
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 div 블록 레이아웃 가운데 정렬하기 (0) | 2017.06.11 |
|---|---|
| HTML5/CSS3 div태그 좌우 반으로 나누기 (0) | 2017.06.10 |
| HTML5/CSS3 background-clip: content-box 배경을 content영역에만 보이도록 한다 (0) | 2017.06.08 |
| HTML5/CSS3 background-position : 배경이미지 위치 지정하기 (0) | 2017.06.07 |
| HTML5/CSS3 background-repeat 배경이미지 반복여부 설정 (1) | 2017.06.06 |