ホームページ > ウェブフロントエンド > htmlチュートリアル > css3、background-clip/background-originの使用シナリオ、簡単な説明_html/css_WEB-ITnose

css3、background-clip/background-originの使用シナリオ、簡単な説明_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:26:28
オリジナル
1685 人が閲覧しました

background-clip/background-origin の使用法については話さないで、まず CSS 背景の知識について話しましょう。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>css背景知识点</title> 6     <style> 7         body,p{ 8             margin:0; 9             padding:0;10         }11         p{12             width:100px;13             height:100px;14             background-color:pink;15         }16     </style>17 </head>18 <body>19     <p></p>20 </body>21 </html>
ログイン後にコピー

今、p の幅と高さはそれぞれ 100px で、色の範囲も 100*100 ですよね?つまり、現在の高さは 110 で、背景のカラーは 100*110 ですよね?

背景にはパディングが含まれるため、background-clip とbackground-origin を使用する必要がある理由を理解することが重要です。

開示、ほとんどの場合、便利なスプライトの背景に使用されます。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>css背景知识点</title> 6     <style> 7         body,p{ 8             margin:0; 9             padding:0;10         }11         .box{12             width:100%;13             height:45px;14             line-height:45px;15             background-color:#ccc;16             17         }18         p{19             width:42px;20             height:40px;21             margin:0 auto;22             background-size:50px 50px;23             background:url("focus-icon.png") no-repeat 0 -50px;24         }25     </style>26 </head>27 <body>28     <div class="box">29         <p></p>30     </div>31 </body>32 </html>
ログイン後にコピー

レンダリング

今度は、真ん中のハートをY方向に下に移動させたいので、pタグにpadding-top:10pxを追加します。

効果は次のとおりです

それ下に移動しない 移動は増えますが、高さは増加します。上記のことを理解していれば、これを理解できるはずです。

これが起こる理由は、背景にパディングが含まれているためです。しかし、今はこれを行いたくないので、トリミング属性である CSS3 属性の background-clip を使用できます

単に、background-clip:content-box; を追加するだけです。つまり、背景はコンテンツから計算されるため、パディングは含まれません。

わかるはずですよね?

では、背景起源とはどういう意味ですか?

ある現象に気づいたかどうかわかりませんが、スプライトを使用すると、デフォルトの画像が左上隅に表示されます。

位置を変更したい場合は、background-oringinを使用できます

途中から開始したい場合は、background-oringin:content-box;に設定します

もちろん、他の属性もあります。一度オンラインで確認してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート