背景-originとbackground-clip_html/css_WEB-ITnoseの違い

Background-originとbackground-clipはCSS3で新しく追加された属性で、実際には、1つは背景画像を配置するもので、もう1つは背景画像をクリップするものです。

background-origin と background-clip のオプションは同じです: content-box、padding-box、border-box (Firefox、Chrome、Safari ではプライベート属性に加えて -mox- と - を使用する必要があることに注意してください) webkit- )

区別する前に説明しましょう:

これは、コンテンツ、パディング、ボーダー、マージンの周囲のエッジが図でマークされています (content- box、padding -box、border-box) は非常に重要な役割を果たしました。

origin とは、翻訳したときの本来の意味を指します。名前が示すように、background-origin は画像の元の開始位置を決定するために使用されます。つまり、背景画像をコンテンツ領域、パディング、または境界線のいずれから開始して表示するかを選択できます。

Background-Origin: Margin Background-Origin: Padding Background-Origin: Content

Background-Origin の値が Content-BOX の場合、背景が最初に左に作成されることがわかります。ピクチャの隅はコンテンツの端の左上隅に揃えられます。パディングボックスが使用されている場合は、背景画像の左上隅がパディングの左上隅に揃えられます。等々。実際に、background-origin の値によって、背景画像の表示が開始される領域が決定されることがわかります。

さらに、background-originのデフォルトの開始位置はどこですか?ここでは説明しませんが、パディングであることを覚えておいてください。

次に、background-clip が紹介されます。その機能は、ニーズに合わせて背景画像を適切にトリミングすることです。もちろん、ここでは画像は本当の意味で切り取られるのではなく、属性値に基づいて切り取られます。画像の特定の部分を適切に非表示にします。

どんな仕立て方法ですか？設定したボックスの位置に応じて、この位置の外縁の外側では画像が見えなくなります。

测试 测试 のテストを行っており、Firefox、Chrome、IE9+ブラウザで上記のように表示されます。

画像は境界線の左上隅から配置されていますが、トリミング属性のbackground-clipがcontent-boxに設定されているため、コンテンツ領域内のコンテンツのみが表示されていることがわかります。コンテンツ内にそのまま表示されます。他のすべての画像コンテンツは非表示になります。

この記事が役に立ったら、指を動かしてこの記事をおすすめしてください~ありがとう~^^