【CSS3】background-originとbackground-clip_html/css_WEB-ITnoseの違い

background-clip と background-origin は、CSS3 で導入された要素の背景に関連する 2 つの属性です。これらは同じオプションの値、つまり border、padding、content を持ち、これら 2 つの各属性はそれぞれを表します。要素の背景と要素の境界線、パディング、およびコンテンツ領域との間の特定の関係。

この 2 つは同様の効果を達成するように見えますが、原理は異なります。 background-origin は背景位置 (background-position) の開始点を定義し、background-clip は背景 (画像と背景色) の切り取りを定義します。

1.background-origin

例を見てみましょう:

スタイルを見てみましょう:

 .bg{            width: 100px;            height: 100px;            padding:50px;            border: 10px dashed #000000;            background: #ffff00 url('pic1.gif') no-repeat;            margin-top: 10px;            display: inline-block;        }        .bg_origin_border{            background-origin: border-box;            /*background-position: 10px 10px;*/        }        .bg_origin_padding{            background-origin: padding-box;            /*background-position: 10px 10px;*/        }        .bg_origin_content{            background-origin: content-box;            /*background-position: 10px 10px;*/        }

バックグラウンドの起源をさらに確認するためにコメントをオンにしてみましょう。

2.backgroung-clip

例を直接見てみましょう:

スタイル:

 .bg_clip_border{            background-clip: border-box;            /*background-position: -10px -10px;*/        }        .bg_clip_content{            background-clip: content-box;            /*background-position: -10px -10px;*/        }        .bg_clip_padding{            background-clip: padding-box;            /*background-position: -10px -10px;*/        }

次にコメントを削除します。

これにより、background-clip が背景と背景色を大まかにカットしていることが確認できます。