CSS의 background-clip 속성은 요소의 배경(색상 또는 이미지)이 어느 영역까지 그려질지를 지정하는 속성입니다. 기본값은 border-box로, 배경이 테두리(border) 영역까지 확장되어 채워집니다.
주요 속성 값
- border-box (기본값): 테두리 영역까지 배경이 적용됩니다.
- padding-box: 테두리 내부의 패딩(padding) 영역까지만 배경이 적용됩니다.
- content-box: 실제 콘텐츠가 위치한 영역에만 배경이 적용됩니다.
- text: 배경이 텍스트 글자 모양으로만 잘려서 표시됩니다. (웹킷 계열 브라우저에서는
-webkit-background-clip: text;사용)
사용 예제
아래 코드는 background-clip: padding-box;를 적용한 예시입니다. 배경색이 빨간 점선 테두리 안쪽의 패딩 영역까지만 채워지는 것을 확인할 수 있습니다.
<html>
<head>
<style>
#demo {
border: 5px dashed red;
padding: 10px;
background: orange;
background-clip: padding-box;
}
</style>
</head>
<body>
<div id="demo">
<h1>www.tutorialspoint.com</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at
their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated,
we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on
topics ranging from programming languages to web designing to academics and much more..
</p>
</div>
</body>
</html>활용 팁
background-clip: text;와 함께 color: transparent;를 조합하면 배경 이미지나 그라데이션이 글자 모양으로 채워지는 시각적으로 매력적인 효과를 만들 수 있습니다. 다만 브라우저 호환성을 고려해 벤더 접두사(-webkit-)를 함께 작성하는 것이 좋습니다.