CSS 배경 클립 속성

CSS background-clip 속성은 배경이 요소와 함께 확장되어야 하는 정도를 정의합니다. 여기서 배경은 색상 또는 이미지가 될 수 있습니다. CSS3 속성 중 하나입니다.

참고: 이미지에 배경색이나 배경 이미지가 없는 경우 이 속성은 시각적 효과만 가집니다.

이 속성은 다음 값만 허용합니다.

보더박스

패딩박스

콘텐츠 상자

텍스트

이니셜

상속

배경 클립 속성의 특성:

| 초기값 | 테두리 상자 |
| 적용 | 모든 요소. ::first-letter 및 ::first-line에도 적용됩니다 |
| 상속 | 아니요 |
| 애니메이션 가능 | 아니요 |
| 버전 | CSS3 |
| 자바스크립트 구문 | object.style.backgroundClip = "content-box"; |

통사론:


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

값:

값
설명

테두리 상자
기본값입니다. 이 값은 배경이 테두리 뒤에 나타나도록 합니다.

패딩 박스
테두리 안에 배경이 나타납니다.

내용 상자
배경이 콘텐츠 상자의 가장자리까지 확장됩니다.

텍스트
이 값을 사용하면 전경 텍스트 내에서 배경이 칠해집니다.

초기의

속성을 기본값으로 설정합니다.

계승하다

부모 요소에서 속성을 상속합니다.

background-clip 속성의 예:

다음 코드는 background-clip 속성을 사용합니다.


<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {

        border: 3px solid #1B0031;

        padding: 15px;

        background: #DEBDFD;

        background-clip: content-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-clip property example</h2>

    <p>Here the "content-box" value is used.</p>

    <div id="example">

      <p>The background extends to the edge of the content box.</p>

    </div>
  </body>
</html>

결과:

위의 코드를 실행하면 아래 이미지와 같은 결과를 얻을 수 있습니다.

background-clip 속성

"padding-box" 및 "border-box" 값이 있는 background-clip 속성의 예:

다음 코드에서는 padding-box 및 border-box 값과 함께 background-clip 속성을 사용합니다.


<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {

        border: 5px dashed #007BB1;

        padding: 15px;

        background: #94DDFD;

        background-clip: border-box;

      }
      #example2 {

        border: 5px dashed #007BB1;

        padding: 15px;

        background: #94DDFD;

        background-clip: padding-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-clip property example</h2>

    <p>Here the background-clip is set to "border-box" (this is the default value).</p>

    <div id="example1">

      <p>The background extends behind the border.</p>

    </div>

    <p>Here the background-clip is set to "padding-box".</p>

    <div id="example2">

      <p>The background extends to the inside edge of the border.</p>

    </div>
  </body>
</html>

결과:

이제 아래 이미지와 같은 결과를 얻을 수 있습니다.

값이 두 개인 배경 클립 속성

"text" 값이 있는 background-clip 속성의 예:

다음 코드는 텍스트 값이 있는 background-clip 속성을 보여줍니다.


<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {

        border: 3px dashed #FD6301;

        padding: 15px;

        background: #000EE4;

        background-clip: text;

        -webkit-background-clip: text;

        color: transparent;

      }
    </style>
  </head>
  <body>

    <h2>Background-clip property example</h2>

    <p>Here the background-clip is set to "text"</p>

    <div id="example">

      <p>The background is painted within the foreground text.</p>

    </div>
  </body>
</html>