画像をページ全体に表示させた後、色ぬりの画面に切り替えたい

###前提・実現したいこと
HTMLとCSSで画像をページ全体に表示させた後、途中から色の一色の画面に切り替えるコードを書いています。

###発生している問題・エラーメッセージ
画像が表示された後、色ぬりだけの部分が表示されず困っています。

###該当のソースコード

HTML/CSS
1<!doctype html>
2<html>
3<style>
4body {
5  /* 画像ファイルの指定 */
6  background-image: url(background.png);
7   
8  /* 画像を常に天地左右の中央に配置 */
9  background-position: center center;
10   
11  /* 画像をタイル状に繰り返し表示しない */
12  background-repeat: no-repeat;
13   
14  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
15  background-attachment: fixed;
16   
17  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
18  background-size: cover;
19   
20  /* 背景画像が読み込まれる前に表示される背景のカラー */
21  background-color: #BCBDC2;
22}
23
24.background2{
25  background-color: #c7e6e2;
26}
27</style>
28
29<body>
30  <center>
31  <div class="background2">
32
33  </div>
34
35
36  </center>
37</body>
38</html>

Lhankor_Mhy

2017/08/04 03:15

当方では問題なく表示されました。#background2の中に何も置いてなくて要素の高さが0になり潰れているのでは？

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、以下のような挙動でしょうか？どうしたいのかよくわからなかったので、2つ用意しました。
(1つ目)

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        html,
13        body,
14        .background1,
15        .background2 {
16            width: 100%;
17            height: 100%;
18        }
19
20        .background1 {
21            background-color: #bcbdc2;
22            background-image: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=image);
23            background-repeat: no-repeat;
24            background-attachment: fixed;
25            background-position: center center;
26            background-size: cover;
27        }
28
29        .background2 {
30            background-color: #c7e6e2;
31        }
32    </style>
33</head>
34<body>
35<div class="background1"></div>
36<div class="background2"></div>
37</body>
38</html>

(2つ目)

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        html,
13        body,
14        .background1,
15        .background2 {
16            width: 100%;
17            height: 100%;
18        }
19
20        .background1,
21        .background2 {
22            position: absolute;
23            top: 0;
24            left: 0;
25        }
26
27        .background1 {
28            z-index: 1;
29            background-color: #bcbdc2;
30            background-image: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=image);
31            background-repeat: no-repeat;
32            background-attachment: fixed;
33            background-position: center center;
34            background-size: cover;
35        }
36
37        .background1:hover {
38            animation: background-animation 3s forwards;
39        }
40
41        .background2 {
42            background-color: #c7e6e2;
43        }
44
45        @keyframes background-animation {
46            0% {
47                opacity: 1;
48            }
49            100% {
50                opacity: 0;
51            }
52        }
53    </style>
54</head>
55<body>
56<div class="background1"></div>
57<div class="background2"></div>
58</body>
59</html>