CSS3 宣言background-clipとbackground-originは、背景に同じ効果があるようです。どちらも背景を HTML 要素に関連する特定の領域に制限しているように見えるので、これら 2 つの宣言の機能に本当に違いがあるのか 疑問に思っていました。
9507 次
7 に答える
22
MDN によると:
CSSのbackground-clipプロパティは、要素の背景 (色または画像) を境界線の下まで拡張するかどうかを指定します。
その間
CSSのbackground-originプロパティは、背景の配置領域を決定します。これは、CSS の background-image プロパティを使用して指定された画像の原点の位置です。
- https://developer.mozilla.org/en-US/docs/CSS/background-clip
- https://developer.mozilla.org/en-US/docs/CSS/background-origin
border-boxどちらのプロパティにも、 、padding-box、およびの 3 つのオプションがありますcontent-box。プロパティはbackground-origin背景が配置される場所を決定し (デフォルトは padding-box)、background-clipは背景のどの部分が表示されるかを決定します (デフォルトは border-box)。プロパティは、一緒に使用することも、個別に使用することもできます。
いくつかの例が役に立つかもしれません:
- デフォルト(どちらのプロパティも指定されていません)
バックグラウンド原点
- background-origin の設定
border-box- 背景画像がわずかに左上にシフトされ、その位置の原点が div の境界線の下にあることに注目してください (これを視覚化するために、境界線は透明にされています)。 - background-origin を
padding-box(デフォルト) に設定 -padding-box値がデフォルト値であるため、これはデフォルトの例と同じに見えるはずです。 - background-origin の設定
content-box- 背景画像がわずかに下と右にシフトされ、その位置の原点が div のコンテンツ領域になることに注意してください。これは、div に適用されるパディングによって決定されます。
背景クリップ
- background-clip を
border-box(デフォルト) に設定 - ここでは、背景画像の原点がパディング ボックス (デフォルト) であり、background-clip が border-box (デフォルト) に設定されているため、デフォルトの例との違いはありません。この場合、画像は境界ボックス内に収まるため、クリップされません。 - background-clip の設定
padding-box- ここでは、背景画像の原点がパディング ボックス (デフォルト) であり、background-clip が padding-box に設定されているため、デフォルトの例との違いはありません。前の例のように、パディング ボックス内に収まるため、画像は切り取られません。 - background-clip set to
content-box- ここでは、div に適用されたパディングによって小さなコンテンツ領域が作成されるため、背景がクリップされていることがわかります。背景画像の原点は依然としてパディングボックスです。
background-clip と background-origin を併用
- background-clip が設定され
padding-box、background-origin が設定されてcontent-boxいます (両方ともデフォルト値ではありません) - ここでは、画像の原点が content-box に設定されていることがわかります。これにより、div のパディングによって通常の位置から押し下げられ、左に移動します。 . 次に、画像が下または右の境界線の下に表示されないように、background-clip が padding-box に設定されています (border-box に設定されている場合は表示されます)。
于 2012-10-05T20:59:34.210 に答える
6
CSS3.infoから:
background-origin プロパティは、特定のボックス内の背景の背景位置を計算する方法を決定するために使用されます。
background-clip プロパティを使用して、背景が境界内に拡張されているかどうかを判断します。
于 2012-10-05T20:58:42.310 に答える
3
これを読んでください：http://www.css3.info/preview/background-origin-and-background-clip/
'background-clip' は、背景がボックス、パディング、またはその他の中にあるかどうかです!
「background-origin」は、特定の境界線、パディングなどで特定の背景の位置を計算するために使用されます!
于 2012-10-05T20:58:29.190 に答える
1
バックグラウンド原点
このプロパティの前に、要素に background-image を追加すると、画像の位置は要素のパディングの左上から始まりました。background-origin を使用すると、background-position の開始点を境界線またはパディングまたはコンテンツのどこにするかを決定できます。
background-origin の新しいプロパティには、box-model に従って 3 つの値があります。
border-box - 境界線の左上に背景位置 0,0 ポイントを配置します。padding-box (デフォルト) - 背景位置をパディングの左上に 0,0 ポイント配置します。content-box - コンテンツの左上に背景位置 0,0 ポイントを配置します。
背景クリップ
background-clip を使用すると、background-image をカットする場所を決定できます。これは、前述の背景の原点値と同じです。
background-clip の新しいプロパティには 3 つの値があります。
border-box (デフォルト) - 画像全体を表示し、何もカットしません。padding-box - 境界線の背景画像をカットします。content-box - ボーダーとパディングの背景画像をカットします。
リンクから取得:
https://coderwall.com/p/h7dwaq/say-hello-to-background-origin-and-background-clip-css3-new-features
于 2016-10-26T16:23:02.260 に答える
1
このトピックについて私が書いた記事があります。background-clipとbackground-originの違いを知りたい人は、この記事をチェックしてください。
于 2016-12-13T03:32:39.613 に答える