CSS / Reference / background-clip

background-clip은 배경색과 배경 이미지가 칠해지는 영역을 정합니다. border-box는 테두리 아래까지, padding-box는 안쪽 여백까지, content-box는 내용 영역까지만 칠합니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.card { background-color: #bfe3ff; background-clip: padding-box; }

값과 적용 조건은 MDN background-clip에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 background-clip-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background-clip 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; height: 150px; border: 12px dashed #718096; padding: 20px; background-color: #eaf2f8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23006c9c'/%3E%3Ccircle cx='40' cy='40' r='24' fill='%23ffd166'/%3E%3C/svg%3E"); background-repeat: no-repeat; }
.target, .reference { background-image: none; background-color: #79c7ed; }
.target { background-clip: border-box; }
.reference { background-clip: content-box; }

/* 좁은 화면에서 실습 외곽을 맞춥니다. */
.target, .reference { max-width: calc(100vw - 48px - 64px); }
</style>
</head>
<body>
<main id="demo">
<h1>background-clip 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">border-box</p><div class="target">내용 영역</div></div><div class="b"><p class="label">content-box</p><div class="reference">내용 영역</div></div></section>
</main>
</body>
</html>

점선 테두리의 틈과 안쪽 여백을 보세요. border-box는 그 뒤까지 색이 보이고 content-box는 내용 영역 밖의 배경을 칠하지 않습니다.

origin과 clip은 역할이 다릅니다

background-origin은 이미지의 배치와 크기를 계산할 기준을 정하고, background-clip은 최종적으로 칠할 범위를 정합니다. clip을 바꿔도 요소의 width, padding, border 자체가 줄어들지는 않습니다. 여러 배경 레이어에는 쉼표로 값을 구분할 수 있습니다.

텍스트 배경 효과의 조건

background-clip: text를 쓰면서 글자에 불투명한 color가 남아 있으면 배경이 가려질 수 있습니다. 글자를 투명하게 만드는 경우 배경 이미지 로딩 실패와 고대비 모드에서 읽을 수 있는 대체 표현도 검토하세요. 요소를 통째로 자르는 clip-path와 혼동하지 않습니다.

텍스트 배경과 읽을 수 있는 대체 색

다음 전체 문서를 css-reference-10582-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>텍스트 배경과 읽을 수 있는 대체 색</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.gradient { color:#164a6b; font-size:2rem;font-weight:700; } @supports (background-clip:text) { .gradient { background-image:linear-gradient(90deg,#164a6b,#8a2465);background-clip:text;color:transparent; } } @media (forced-colors:active) { .gradient { background-image:none;color:CanvasText; } }
  </style>
</head>
<body>
<main>
  <h1>텍스트 배경과 읽을 수 있는 대체 색</h1>
<p class="gradient">읽을 수 있는 CSS 텍스트</p>
</main>
</body>
</html>

@supports 안에서만 글자색을 투명하게 하고 기본 글자색은 남깁니다. 개발자 도구에서 background-image만 해제하면 글자가 사라질 수 있음을 확인한 뒤 복구하세요. 이미지 로딩 실패와 인쇄 환경에서도 투명 글자에만 의존하지 않도록 실제 사용 조건에 맞게 대체 색을 적용합니다.

첫 예제의 .target에서 background-clip만 border-box → padding-box → content-box 순으로 바꾸면 같은 이미지·색·여백·테두리로 세 영역을 비교할 수 있습니다. background-origin은 바꾸지 않고 마지막에 border-box로 복구합니다.

여러 배경 속성을 한 화면에서 조합하려면 배경색과 배경 이미지 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 background-origin입니다.

적용되지 않거나 예상과 다를 때

• 불투명한 실선 테두리에서는 border-box와 padding-box의 차이가 가려질 수 있습니다.
• content-box 차이를 확인하려면 padding을 충분히 주고 배경색을 대비시킵니다.