画像の上に文字を入れる方法

メリットとデメリット

メリット

画像ではないので文字が崩れない
レスポンシブデザインに対応できる
SEOに対応できる
文字を選択してコピーすることができる

デメリット

好きな場所に文字を配置するのにコードが必要
イメージによってはうるさく見える

演習

classを作って画像と文字の場所を設定する
画像を用意してclassの中に配置する
テキストも一緒にclassの中に入れる
CSSで指定する

Hello World

HTML

<div class="hero">
    <img src="../image/image_name.jpg">
    <h2>Hello World</h2>
</div>

CSS

.hero img{
            width: 100%;
            height:auto;
            position:relative;
            }

.hero h2{
            position: absolute;
            font-size:2em;
            color:#fff;
            top: 5%;
            left: 5%;
            }
            
/*--responsive--*/
@media screen and (max-width: 768px){
.hero h2{
            position: absolute;
            font-size:2em;
            color:#fff;
            top: 2%;
            left: 2%;
            }
        }