CSS3_html/css_WEB-ITnoseのbackground-originとbackground-clipの違い

平たく言えば、実際には。

これらにはすべて、border-box |padding-box | content-box の 3 つの値があります。ここで、background-origin のデフォルト値は padding-box、background-clip のデフォルト値は border-box です。

次の例は、それらの違いをより直接的に表現できるはずです:

最初に

<div class='box'></div>

それから簡単なスタイルを追加します:

.box{  width:450px;  height:300px;  background-image: url('http://a4.att.hudong.com/40/03/16300001203327135349034613246.jpg');  background-repeat:no-repeat;  background-size: 400px 240px;  border: 30px dashed #458B74;  background-color:#B9D3EE;  padding:20px;}

表示される効果は次のとおりです:

次のこともできます。こちらを参照してください。background-originとbackground-clipのデフォルト値は、それぞれpadding-boxとborder-boxです。

次のコードのセットを追加すると、さまざまな効果が確認できます:

A----------------------------- -------------------------------------------------- -- -----------

.box{    background-origin:border-box;    background-clip:border-box;}

ここでわかるように、背景画像は境界線から描画され始め、表示も境界線から開始されるため、効果は上記のように。

B----------------------------------------------- --- --------------------------------------------------- -

.box{    background-origin:border-box;    background-clip:padding-box;}

描画はまだボーダーから始まりますが、表示はパディングから始まるので上記のように表示されます。

c----------------------------------------------- --- --------------------------------------------------- -

.box{    <strong>background-origin</strong>:content-box;    background-clip:border-box;}

コンテンツから描画が開始され、境界線から表示が開始されます。

D----------------------------------------------- --- --------------------------------------------------- -

もちろん、描画した場合は、境界線から開始してコンテンツから表示が開始され、効果は次のようになります。

れーい