HTML/CSS

【簡単】position:relative;とabsoluteで画像に文字を重ねる

更新日:

このブログでは私自身がプログラミング、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;
}

display: flex;justify-content: center;align-items: center;で文字を上下左右に中央寄せして完成です。

オススメしている本

他の投稿

-HTML/CSS

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.