このブログでは私自身がプログラミング、Web関係、生活していて経験した悩んだことを同じように悩んでいる人の手助けになるような情報を発信していきます。
基となる作品
はじめに
HTML
<body>
<section class="top">
<img src="ここに画像.png" alt="">
<h1>キャッチフレーズ</h1>
</section>
</body>CSS
body{
margin:0;
}
.top img{
width: 100%;
height: 55vw;
max-height: 1000px;
}
.top{
position: relative;
}画像は画面に丁度収まるようにスタイリングをしておきます。
topクラス（親要素）にposition: relative;とします。
では解説していきます
CSS
.top h1{
color: white;
background-color: rgba(0,0,0,0.4);
margin: 0;
font-size: calc(20px + 3vw);
font-family: 'Noto Serif JP', serif;
position: absolute;
top:0;
left: 0;
}topクラスの中のh1（子要素）にposition: absolute;top:0;left: 0;とするとちゃんと画像の上に重なり左上に来ているはずです。
その他は文字と背景色のスタイリングです。
次に
CSS
.top h1{
margin: 0;
font-size: calc(20px + 3vw);
font-family: 'Noto Serif JP', serif;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 55vw;
max-height: 1000px;
object-fit: contain;
}topクラスと同じように画面に丁度収まるようにすると背景色が画像を覆ってくれると思います。
最後に
.top h1{
margin: 0;
font-size: calc(20px + 3vw);
font-family: 'Noto Serif JP', serif;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 55vw;
max-height: 1000px;
object-fit: contain;
display: flex;
justify-content: center;
align-items: center;
}