背景の画像を固定しよう

Question

問題1：背景の画像を固定しよう

今回の問題は、背景の画像を固定してスクロールしても画像の位置を変えないというものです。

背景の画像を固定しつつ、テキストレイヤーを最上部に持ってきて
背景画像は動かさず、スクロールした際にテキストとグレーエリアだけ動くよう
CSSファイルの指定の3つのセレクタを使用して見本どおりに実装してください。

※スクロールできるようにbodyタグにheightで高さをとりましょう。
例: body{height: 2000px;}

あらかじめエディタに書くコード

                <section class="block">
    <div class="block__text">
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
    </div>
    <div class="block__layer"></div>
</section>
¥HTML¥

                .block {
    background-image: url(https://ninjacode.work/assets/img/kv.png);
}
.block__layer {
}
.block__text {
}
¥CSS¥

Answer 1

解答ソースコード

              <section class="block">
  <div class="block__text">
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
  </div>
  <div class="block__layer"></div>
</section>
¥HTML¥

              .block {
    background-image: url(https://ninjacode.work/assets/img/kv.png);
    position: relative;
    background-attachment: fixed;
    width: 100%;
    height: 1000px;
}
.block__layer {
    width: 100%;
    height: 1000px;
    background-color: #000;
    opacity: .6;
}
.block__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 20px;
    color: #fff;
    z-index: 1;
}
¥CSS¥

背景の画像を固定しよう

問題1：背景の画像を固定しよう

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説

補足