【CSS】擬似要素で背景を重ねるレイアウト
acquiesce.inc
CSSの擬似要素「::after」を使って、画像や文章の背面に背景を重ねるレイアウトを紹介します。Flexboxによる横並びの配置と、positionやz-index、isolationを使った背景の位置・重なり順の調整方法を、HTMLとCSSのサンプルコード付きで解説します。
HTMLサンプル
<div class="bg-after">
<figure><img src="images001" alt="画像"></figure>
<div class="text-unit">
<h3>見出しが入ります</h3>
<p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
</div>
</div>コピペで使えるCSSサンプル
/* 擬似要素で背景を重ねる */
.bg-after {
position: relative;
isolation: isolate;/* 重なり順 */
}
.bg-after::after {
content: "";
position: absolute;
z-index: -1;/* 重なり順 */
top: 0;
right: 0;
width: 65%;
height: 100%;
background-color: #A5D0F7;/* 背景色 */
border-radius: 0 0 0 100px;/* 角丸 */
}
/* 横並びのレイアウト */
.bg-after {
display: flex;
align-items: center;
justify-content: space-between;
}
.bg-after figure {
width: 40%;
margin: 0;
}
.bg-after figure img {
display: block;
width: 100%;
height: auto;
}
.bg-after .text-unit {
width: 55%;
}背景レイアウト変更
擬似要素のpositionやwidthを変更して位置やサイズ、色を自由に変更可能
位置変更
.bg-after::after {
bottom: 0;
left: 0;
border-radius: 0 100px 0 0;/* 角丸 */
}サイズ変更
.bg-after::after {
width: 25%;
height: 50%;
}CSS解説
配置イメージ：右側65%に水色の背景を敷き、その手前に画像と文章を表示する。
position: relative;擬似要素を配置するときの基準になるisolation: isolate;要素内の重なり順を独立させるdisplay: flex;子要素を横並びにするalign-items: center;子要素を縦方向の中央に揃えるjustify-content: space-between;子要素を両端に配置し、間に余白を作る
