どうも7noteです。画像をテキストや文字に重ねたいときに使える3つの方法を解説
①背景画像にする
背景画像を指定してしまえば、画像の上に文字や別の画像を設置できます。
ただし、背景画像を前面に持ってくることはできません。
index.html
<div class="box"><img src="sample01.jpg" alt=""></div>
style.css
.box {
background: url(sample02.jpg); /* 背景画像に緑の画像を指定 */
width: 800px; /* 画像にあわせて適当な幅を指定 */
padding: 20px; /* 適当な余白を指定 */
}
②position指定で重ねる
position指定を使うことで自由にコンテンツの位置や前後の重なり順を指定することができます。
ただしその分コンテンツの高さが無くなるので乱用しすぎるとレイアウト崩れの原因にもなります。
index.html
<div class="box">
<img src="sample01.jpg" alt="" class="img_01">
<img src="sample02.jpg" alt="" class="img_02">
</div>
style.css
.box {
width: 500px; /* 適当な幅を指定 */
height: 300px; /* 適当な高さを指定 */
position: relative; /* 基準位置とする */
}
/* 共通するCSS */
.box img {
width: 300px; /* 適当な幅を指定 */
position: absolute; /* 相対位置に指定 */
}
.box .img_01 {
/* 左上に固定 */
top: 0;
left: 0;
}
.box .img_02 {
/* 右下に固定 */
bottom: 0;
right: 0;
}
③ネガティブマージンで重ねる
この方法では無理やりマイナスの値のmarginを指定することで、ほかの要素の上に画像やテキストを重ねる事ができます。
ガッツリ重ねるというよりは、一部が被る程度の時に使えます。
index.html
<div class="img_01"><img src="sample01.jpg" alt=""></div>
<div class="img_02"><img src="sample02.jpg" alt=""></div>
style.css
img {
width: 300px; /* 適当な幅を指定。※解説用なのでなくてもOK */
}
.img_02 {
margin-top: -100px; /* 上方向にネガティブマージンを取る */
opacity: .5; /* ※解説用にかぶっているところをわかりやすくしているだけ */
}
まとめ
いかがでしょうか？
画像の重ね方とかで調べると、どの記事もposition指定の方法しか書かれていなかったりしますが、個人的には初心者にposition指定だけ教えてしまうと何でもかんでもposition指定してレイアウト崩れを起こしたり、配置の修正が難しくなってしまう場合が多いなと感じています。
しっかりとその場面に合わた方法がある事を伝えたいと思い記事にしました。
状況に合わせて使ってください。お役にたてれば嬉しいです。
【フロントエンド強化月間に参加中↓↓】
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
↧