집 >웹 프론트엔드 >CSS 튜토리얼 >CSS의 background-clip 속성에 대한 자세한 설명

CSS의 background-clip 속성에 대한 자세한 설명

小云云원래의: 2018-03-30 10:57:194627검색

이 글에서는 CSS의 background-clip 속성의 기능을 주로 소개합니다. background-clip 속성의 인기 기능은 요소의 배경이 위치한 영역을 지정하는 것입니다. CSS의 background-clip 속성이 모든 사람에게 도움이 되기를 바랍니다.

Background-clip 속성의 인기 있는 기능은 요소의 배경이 위치한 영역을 지정하는 것입니다.

1. border-box

border-box가 기본값입니다. 요소의 배경이 테두리 영역( border 포함)에서 나오고 배경을 유지하기 시작한다는 의미입니다.

간단한 코드는 다음과 같습니다.

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat -5px;padding:5px;border:5px dotted #000;<br>　　　　　　　background-clip:border-box;}
        </style>
   </head>
   <body>
       <p class="box"></p>
   </body>
</html>

효과는 다음과 같습니다.

위 그림을 보면 요소 배경이 테두리와 그 안의 영역에 기본적으로 존재하는 것을 볼 수 있습니다. , 하지만 배경 이미지를 추가한 이유를 알 수 없으며 모두 포함할 수 없습니다. 배경색에는 이 문제가 없습니다.

2. padding-box

padding-box는 요소의 배경이 패딩 영역(패딩 포함) 내에 유지된다는 의미입니다.

간단한 코드는 다음과 같습니다.

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat -5px;padding:5px;border:5px dotted #000;<br>            background-clip:padding-box;}
        </style>
   </head>
   <body>
       <p class="box"></p>
   </body>
</html>

효과는 다음과 같습니다.

위 그림을 보면 패딩과 영역 내에 배경 이미지가 존재하는 것을 알 수 있습니다.

3. 콘텐츠 상자

콘텐츠 상자는 요소의 배경이 콘텐츠 영역 내에서 유지됨을 의미합니다.

간단한 코드는 다음과 같습니다.

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat -5px;padding:5px;border:5px dotted #000;<br>            background-clip:content-box;}
        </style>
   </head>
   <body>
       <p class="box"></p>
   </body>
</html>

효과는 다음과 같습니다.

위 그림을 보면 콘텐츠 영역 내에 배경 이미지가 존재하는 것을 알 수 있습니다.

4.text

content-box는 요소의 배경이 전경 내용(텍스트)에 남아 있다는 뜻으로, 현재는 Chrome 브라우저만 지원합니다

간단한 코드는 다음과 같습니다.

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:red;padding:5px;border:5px dotted #000;<br>             font-size:100px;font-weight；bold;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
        </style>
   </head>
   <body>
       <p class="box">你 好 你 好</p>
   </body>
</html>

효과는 다음과 같습니다.

참고: 현재 값이 텍스트인 경우 호환성이 매우 낮으므로 알아 두십시오.

CSS의 background-clip 속성에 대한 자세한 설명

관련 기사