ホームページ > 記事 > ウェブフロントエンド > css3、background-clip/background-originの使用シナリオ、簡単な説明_html/css_WEB-ITnose
css3、background-clip/background-originの使用シナリオ、簡単な説明_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:26:281665ブラウズ
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;に設定します
もちろん、他の属性もあります。一度オンラインで確認してください。