画像の上にテキストを重ねたい
画像の上にテキストを重ねるには、ポジション配置を行います。記事のリンクやトップページに掲載されるスライドショーなどでよく用いられるデザインです。
サンプル
<div class=”photo”>に「font-size: 0;」を適用している理由
ある要素に<img>タグが含まれていると、そのボックスの下部と画像の間にスペースが空きます。しかし、画像と上に重ねた黒い半透明ボックスをぴったり重ねるためには、親要素のボックスと画像の間に空くスペースをなくす必要があります。このスペースをなくすには<img>タグにvertical-alignプロパティを適用する方法もありますが、親要素のほうに「font-size:0;」を適用しても同じことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8">
<style>
.keyvisual{
position: relative;
width:800px;
}
.photo{
font-size:0;
}
.copy{
position: absolute;
left:0;
bottom:0;
width: 100%;
background:#353441;
opacity:0.8;
text-align: center;
}
.copy a{
text-decoration: none;
color: #fff;
}
.copy a:hover{
text-decoration: none;
color: #ccc;
}
.copy p{
padding: 20px 40px;
font-size:18px;
}
</style>
</head>
<body>
<div class="keyvisual">
<div class="photo">
<img src="./images/keyvisual.jpg" alt=""/>
</div>
<div class="copy">
<p><a href="#">中学生になったら部活動はどこにしようかな？</a></p>
</div>
</div>
</body>
</html>実行結果
