4.1 基本原則
CSSを使うと、一つの要素に複数の背景画像を使うことができて、これにより複雑で面白いビジュアルエフェクトを作る幅広い可能性が生まれるんだ。background-imageプロパティと関連するプロパティを使って、複数の背景画像のレイヤーを設定し、それらの順序や位置、その他の特性を管理できるんだ。
構文
複数の背景画像を設定するには、画像をカンマで区切って並べる構文を使うよ:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
各レベルの設定プロパティ
background-imageに加えて、各レイヤーの背景画像を設定するために、以下のプロパティも使えるんだ。それらもカンマで区切って複数の値をサポートしているよ:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
レイヤーの順序
画像は並べた順にレイヤーとして配置されて、最初の画像がユーザーに最も近く、最後の画像が要素の背景に最も近いんだ。
4.2 画像のオーバーレイ
シンプルな画像オーバーレイの例。
利用例:
CSS
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
HTML
<body>
<div class="multi-bg">多層背景</div>
</body>
コードの説明:
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: 二つの背景画像を設定するbackground-position: center, top left;: 最初の画像を中央に、第2の画像を左上に配置するbackground-repeat: no-repeat, no-repeat;: 両方の画像の繰り返しをオフにする
4.3 複数の画像利用
異なるサイズの複数の背景画像利用の例。
利用例:
CSS
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
HTML
<body>
<div class="multi-bg-sizes">サイズ付き多層背景</div>
</body>
コードの説明:
background-size: 50% 50%, 30% 30%;: 最初の画像を要素の幅と高さの50%に、2番目の画像を30%に拡大する
4.4 透明な画像
透明度のある画像のオーバーレイ。
利用例:
CSS
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
HTML
<body>
<div class="multi-bg-opacity">透明性を持つ多層背景</div>
</body>
コードの説明:
background-size: cover, 50%;: 最初の画像を要素全体に覆い、2番目の画像を要素の50%のサイズにする::before: 擬似要素が背景画像の上に半透明の黒いレイヤーを追加する
4.5 背景のクリッピング
複数の背景画像で他のプロパティを利用。
background-origin と background-clip
これらのプロパティは背景画像が表示される領域と背景のクリッピング領域を制御するんだ。
利用例:
CSS
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
HTML
<body>
<div class="multi-bg-origin-clip">background-origin と background-clip を持つ多層背景</div>
</body>
コードの説明:
background-origin: padding-box, content-box;: 最初の画像はパディングの内側の縁から始まり、2番目の画像は要素の内容から始まるbackground-clip: border-box, padding-box;: 最初の画像はボーダーの外側でクリップされ、2番目の画像はパディングの内側でクリップされる
GO TO FULL VERSION