ホームページ > 記事 > ウェブフロントエンド > CSSのbackground-clipプロパティの詳しい説明

CSSのbackground-clipプロパティの詳しい説明

小云云オリジナル: 2018-03-30 10:57:194594ブラウズ

この記事では、CSS における background-clip 属性の役割を主に紹介します。background-clip 属性の一般的な機能は、要素の背景が配置される領域を指定することです。 CSSのbackground-clip属性が皆さんのお役に立てば幸いです。

background-clip 属性の一般的な機能は、要素の背景が配置される領域を指定することです。デフォルト値は

1 です。要素の背景が境界領域 ( 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. content-box

content-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: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プロパティの詳しい説明

関連記事