質問編集履歴
5
今の問題について画像を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -18,7 +18,11 @@
|
|
|
18
18
|
→下にスクロールしても、背景が画像がちゃんと付いてくる（fixed）。
|
|
19
19
|
|
|
20
20
|
### 今の問題
|
|
21
|
-
|
|
21
|
+
追加
|
|
22
|
+
・背景画像が灰色になった
|
|
23
|
+
・コンテンツ（紫の透かし）が左寄りになり、サイトの1番下まで行かず途切れている。
|
|
24
|
+
|
|
25
|
+
|
|
22
26
|
・回答のコードを試しましたが、下記の様な状態になっています。
|
|
23
27
|
→切り替えの画像がテキストの上に来てしまう。
|
|
24
28
|
→背景画像の切り替えは紫の透かしの下で行いたい
|
4
実現したいことを整理しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,20 +7,23 @@
|
|
|
7
7
|
→背景画像はfixedを使いスクロールしても途切れない状態
|
|
8
8
|
→背景画像のサイズはpc画面ちょうど。
|
|
9
9
|
|
|
10
|
+
完成イメージとしては、下記の画像で表示している青空の背景画像を（現在は.bg_img で背景を表示）
|
|
11
|
+
10秒程度で、他の画像（.bg_img .src1内にあるURLのやつ）に変更可能にしたいです。
|
|
12
|
+
html,cssの構造？は背景画像の切り替えができれば変更しても構いません。
|
|
13
|
+
→cssのsample以下は透かしの背景色を調整しているので、そのまま機能を残したいです。
|
|
14
|
+
|
|
15
|
+
・背景画像の表示は
|
|
16
|
+
→透かしの下に置く
|
|
17
|
+
→1枚の画像で画面サイズにcoverする様に表示（norepeat）
|
|
18
|
+
→下にスクロールしても、背景が画像がちゃんと付いてくる（fixed）。
|
|
19
|
+
|
|
10
20
|
### 今の問題
|
|
11
|
-
背景画像が切り替わらない。
|
|
12
|
-
上の背景画像をpc画面ぴったりの大きさで、スクロールしても途切れない状態はできましたが、
|
|
13
|
-
時間で背景画像を切り替えようとすると上手くいきません。
|
|
14
|
-
__ →サイトを開いている時に自動で10秒毎に永遠と切り替えたいのですが、
|
|
15
|
-
現状だと背景画像が固定のままで変化しない状態です。
|
|
16
|
-
cssの.bg_img{}内にある
|
|
17
|
-
「background-image : url("doraemon_background_1.png");」を消すと、背景画像すら表示されなくなります・
|
|
18
|
-
それ以外の文章・画像やその後ろにある背景色の切り替えは正常に機能しています。**__
|
|
19
21
|
|
|
20
22
|
・回答のコードを試しましたが、下記の様な状態になっています。
|
|
21
23
|
→切り替えの画像がテキストの上に来てしまう。
|
|
22
24
|
→背景画像の切り替えは紫の透かしの下で行いたい
|
|
23
25
|
→赤信号の様にrepeatせず、後ろの空の画像の様に1枚で画面をcoverできるようにしたい。
|
|
26
|
+
|
|
24
27
|
|
|
25
28
|
|
|
26
29
|
```html
|
3
問題が発生している箇所のスクショを追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,6 +17,11 @@
|
|
|
17
17
|
「background-image : url("doraemon_background_1.png");」を消すと、背景画像すら表示されなくなります・
|
|
18
18
|
それ以外の文章・画像やその後ろにある背景色の切り替えは正常に機能しています。**__
|
|
19
19
|
|
|
20
|
+
・回答のコードを試しましたが、下記の様な状態になっています。
|
|
21
|
+
→切り替えの画像がテキストの上に来てしまう。
|
|
22
|
+
→背景画像の切り替えは紫の透かしの下で行いたい
|
|
23
|
+
→赤信号の様にrepeatせず、後ろの空の画像の様に1枚で画面をcoverできるようにしたい。
|
|
24
|
+
|
|
20
25
|
|
|
21
26
|
```html
|
|
22
27
|
</head>
|
2
記載して頂いたコードに変更しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
background-attachment: fixed;
|
|
56
56
|
overflow : hidden;
|
|
57
57
|
}
|
|
58
|
-
.
|
|
58
|
+
.bg_img .hat{
|
|
59
59
|
position : absolute;
|
|
60
60
|
top : 0;
|
|
61
61
|
left : 0;
|
|
@@ -65,22 +65,21 @@
|
|
|
65
65
|
animation : bgAnime 40s infinite;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
.
|
|
68
|
+
.bg_img .src1 {
|
|
69
69
|
background-image : url("doraemon_background_1.png"); /* 背景の画像を指定 */
|
|
70
70
|
}
|
|
71
|
-
.
|
|
71
|
+
.bg_img .src2 {
|
|
72
72
|
background-image : url("doraemon_kabegami1.png"); /* 背景の画像を指定 */
|
|
73
73
|
animation-delay : 10s;
|
|
74
74
|
}
|
|
75
|
-
.
|
|
75
|
+
.bg_img .src3 {
|
|
76
76
|
background-image : url("doraemon_background2.png"); /* 背景の画像を指定 */
|
|
77
77
|
animation-delay : 20s;
|
|
78
78
|
}
|
|
79
|
-
.
|
|
79
|
+
.bg_img .src4 {
|
|
80
80
|
background-image : url("doraemon_kabegami1.png"); /* 背景の画像を指定 */
|
|
81
81
|
animation-delay : 30s;
|
|
82
82
|
}
|
|
83
|
-
|
|
84
83
|
@keyframes bgAnime {
|
|
85
84
|
0% { opacity: 0; }
|
|
86
85
|
10% { opacity: 1; }
|
1
今の問題にどういう現象が発生しているか記載しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,6 +11,12 @@
|
|
|
11
11
|
背景画像が切り替わらない。
|
|
12
12
|
上の背景画像をpc画面ぴったりの大きさで、スクロールしても途切れない状態はできましたが、
|
|
13
13
|
時間で背景画像を切り替えようとすると上手くいきません。
|
|
14
|
+
__ →サイトを開いている時に自動で10秒毎に永遠と切り替えたいのですが、
|
|
15
|
+
現状だと背景画像が固定のままで変化しない状態です。
|
|
16
|
+
cssの.bg_img{}内にある
|
|
17
|
+
「background-image : url("doraemon_background_1.png");」を消すと、背景画像すら表示されなくなります・
|
|
18
|
+
それ以外の文章・画像やその後ろにある背景色の切り替えは正常に機能しています。**__
|
|
19
|
+
|
|
14
20
|
|
|
15
21
|
```html
|
|
16
22
|
</head>
|
|
@@ -43,6 +49,7 @@
|
|
|
43
49
|
}
|
|
44
50
|
|
|
45
51
|
.bg_img {
|
|
52
|
+
background-image : url("doraemon_background_1.png");
|
|
46
53
|
background-size: cover;
|
|
47
54
|
min-height: 100vh;
|
|
48
55
|
background-attachment: fixed;
|