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

background-origin: 特定のボックス内の背景の背景位置がどのように計算されるかを決定します。

background-clip: 背景が境界線にまで及ぶかどうかを決定します。

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

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----------------------------------------------- --- --------------------------------------------------- -

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

れーい