css3_html/css_WEB-ITnose の背景の新しい属性

前書き

背景画像に関するいくつかの新しい属性が CSS3 に登場しました:background-origin、background-clip、background-position など。以前から大まかには理解していましたが、background-origin と background-origin の違いはクリップはまだクリアされていません。グーグルで記事を検索してとても良い記事を見つけたので、翻訳してみましょう。
元のリンク: CSS3 の新しい背景位置
CSS3 の新機能、Background-Origin と Background-Clip をご紹介します
ps: 元のオンライン コード デモは codepen.io から runjs.cn に移動されました

background-position

CSS を使用して要素の背景画像を設定する人は皆、background-position 属性を使用して、要素の左上隅 (top、left) を基準にしてその位置の値を設定していました。

div {background-position: 20px 40px; /* 距左边20px & 距顶部40px */ }

問題は、右下隅 (下、右) など、他の点に対する正確な位置を決定することができないことです。左上隅からのみ開始できます。
背景位置: 右下; または 背景位置: 70% /* 左から */ 80%/* 上から */ と書くことはできますが、右端から 20 ピクセル、下から 20 ピクセルを書き込むことはできません。

新しい背景位置を使用します

この問題を解決するために、CSS3 は開始位置を定義し、原点の位置 (0,0) を決定する機能を提供します。

仕組み

2 つの値 (左と上に対する水平方向と垂直方向の距離) のみを割り当てることができた以前の状況と比較して、CSS3 を使用してその水平方向と垂直方向の位置の原点を指定できるようになりました。右下 + 値など。

背景位置: 右 20px 下 40px

ライブサンプル

同時に、ボックスに複数の背景画像を設定することもでき、各画像の原点は異なります。

ライブサンプル

background-origin

CSS2 では、要素に背景画像を追加すると、画像は要素のパディングの左上隅から始まります。

デフォルトの背景原点位置は、背景位置値を左 0、上 0 に設定することと一致します。背景画像がパディングで始まっていることがわかります。

ライブサンプル

background-origin を通じて、背景画像の開始位置のボーダー、パディング、またはコンテンツを設定できます

- 要素のボーダー (0, 0) の左上隅を基準としたボーダーボックス
- padding-box(デフォルト) 要素のパディングの左上隅を基準にします
- content-box 要素のコンテンツの左上隅を基準にします。
ライブサンプル

background-clip

background-origin の例でわかるように、background-origin の背景画像は要素の境界線/パディングの右/下を覆っています

この問題を解決するには、background-clip を使用します。背景クリップを使用すると、背景画像がトリミングされる位置を決定できます。値は背景原点の値と同じですが、デフォルトはボーダーボックスであり、トリミングはありません。

ライブサンプル

背景オリジンと背景クリップの例から、ほとんどの場合、これらを一緒に使用する必要があることがわかります。そして、これらの属性を使用して、次のようなより良いものを書くことができます:

実際の例

ps: これは初めての翻訳ですが、ほとんど理解できません。 。 。