CSS3の複数背景と背景画像のトリミング・位置・サイズについて詳しく解説

CSS3 が登場する前は、背景に 画像を追加できました

CSS3 では、1 つの要素に複数の画像を追加できました

複数の背景画像

<p class="demo"></p>

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url('1.png') no-repeat;}

---

複数の背景で複数の画像リソースを背景に追加できます属性をカンマで区切ってから、
background-positionを使用して希望の位置に配置します

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url('1.png') no-repeat,                url('2.png') no-repeat 200px 0,                url('3.png') no-repeat 400px 0;}

no-repeatが設定されていない場合、下の画像リソースは上の画像リソースを上書きします

開始位置

background-origin

background-origin を使用すると、画像の配置を開始する場所を定義できます
オプションの属性値 padding-box (デフォルト)、border-box、content-box
padding-box デフォルト画像 開始Padding
より これを証明するためにパディングを追加することができます

.demo {    width: 600px;    height: 200px;    border: 20px solid gray/*改*/;    padding: 20px/*增*/;    background: url('1.png') no-repeat,                url('2.png') no-repeat 200px 0,                url('3.png') no-repeat 400px 0;}

[注: CSS はコメントできません。ハイライト効果のためにこのようにコメントしています。誤解しないでください]

---

border-box の定義境界線から始まる画像

.demo {    width: 600px;    height: 200px;    border: 20px solid gray;    padding: 20px;    background: url('1.png') no-repeat,                url('2.png') no-repeat 200px 0,                url('3.png') no-repeat 400px 0;    background-origin: border-box/*增*/;}

border-boxに変更しました 灰色の背景色の下部で画像の一部がブロックされていることがわかりました
実際には境界線は要素の上にあるはずであることがわかります

---

.demo {    width: 600px;    height: 200px;    border: 20px solid gray;    padding: 20px;    background: url('1.png') no-repeat,                url('2.png') no-repeat 200px 0,                url('3.png') no-repeat 400px 0;    background-origin: content-box/*改*/;}

コンテンツ ボックスは要素のコンテンツ部分からの開始位置として定義されます

画像のトリミング背景クリップ

開始位置はコンテンツ領域に設定されています
が、これは画像がはコンテンツ領域に限定されています
要素の境界線全体と境界線内に描画できます
これを証明するために上記のコードを少し変更できます

.demo {    width: 600px;    height: 200px;    border: 20px solid transparent/*改*/;    padding: 20px;    background: url('1.png') no-repeat,                url('2.png') no-repeat 200px 0,                url('3.png')/*删掉no-repeat 默认repeat*/ 400px 0;    background-origin: content-box;}

それでは、画像の表示範囲を設定する方法はありますか？
これは背景クリップを使用します
属性は、padding-box (デフォルト)、border-box、content-box を含む content-origin
の属性値に似ています
次のように画像の表示範囲を設定します。トリミングされました

.demo {    width: 600px;    height: 200px;    border: 20px solid transparent;    padding: 20px;    background: url('1.png') no-repeat,                url('2.png') no-repeat 200px 0,                url('3.png') 400px 0;    background-origin: content-box;    background-clip: content-box/*增*/;}

なので、画像の余分な部分は見えません

---

Webキットの画像トリミング属性には、テキストという特別な属性値もあります
これは、背景が画像はテキストに限定されています
text-fill-color を使用すると、ユニークなマスキングテキスト効果を形成できます。理解してください。写真の 1 つに戻りましょう

<p class="demo">某科学的超电磁炮</p>  <--添加内容

rreeee

画像サイズbackground-size

background- size この属性により、画像のサイズを制御できます
たとえば、幅と高さを制御するには、2つのピクセル値を書き込みます

.demo {    width: 600px;    height: 200px;    border: 20px solid transparent;    padding: 20px;    background: url('1.png') no-repeat,                url('2.png') no-repeat 200px 0,                url('3.png') 400px 0;    background-origin: content-box;    -webkit-background-clip: text;/*增*/
    -webkit-text-fill-color: transparent;/*增*/
    font: 75px/200px bold;/*增*/}

ピクセル値を書き込むことは、幅と高さのピクセルが同じであることを意味します
もちろん、パーセント形式で書くこともできます

---

さらに、2つのキーワードがあります: cover と contain
cover は領域全体をカバーします。この例では、幅は埋められます

.demo {/*新*/
    width: 600px;    height: 200px;    border: 1px solid black;    background: url('1.png') no-repeat;    background-size: 180px 140px;}

---

contain は、確実に画像が最大領域で表示されることを確認します

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url('1.png') no-repeat;    background-size: cover/*改*/;}

CSS3の背景画像の内容はおそらくこれです

以上がCSS3の複数背景と背景画像のトリミング・位置・サイズについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。