質問編集履歴
5
今の問題について画像を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -38,7 +38,15 @@
|
|
|
38
38
|
|
|
39
39
|
### 今の問題
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
追加
|
|
42
|
+
|
|
43
|
+
・背景画像が灰色になった
|
|
44
|
+
|
|
45
|
+
・コンテンツ（紫の透かし）が左寄りになり、サイトの1番下まで行かず途切れている。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
42
50
|
|
|
43
51
|
・回答のコードを試しましたが、下記の様な状態になっています。
|
|
44
52
|
|
4
実現したいことを整理しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -16,24 +16,28 @@
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
|
|
19
|
+
完成イメージとしては、下記の画像で表示している青空の背景画像を（現在は.bg_img で背景を表示）
|
|
20
|
+
|
|
21
|
+
10秒程度で、他の画像（.bg_img .src1内にあるURLのやつ）に変更可能にしたいです。
|
|
22
|
+
|
|
23
|
+
html,cssの構造？は背景画像の切り替えができれば変更しても構いません。
|
|
24
|
+
|
|
25
|
+
→cssのsample以下は透かしの背景色を調整しているので、そのまま機能を残したいです。
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
・背景画像の表示は
|
|
30
|
+
|
|
31
|
+
→透かしの下に置く
|
|
32
|
+
|
|
33
|
+
→1枚の画像で画面サイズにcoverする様に表示（norepeat）
|
|
34
|
+
|
|
35
|
+
→下にスクロールしても、背景が画像がちゃんと付いてくる（fixed）。
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
19
39
|
### 今の問題
|
|
20
40
|
|
|
21
|
-
背景画像が切り替わらない。
|
|
22
|
-
|
|
23
|
-
上の背景画像をpc画面ぴったりの大きさで、スクロールしても途切れない状態はできましたが、
|
|
24
|
-
|
|
25
|
-
時間で背景画像を切り替えようとすると上手くいきません。
|
|
26
|
-
|
|
27
|
-
__ →サイトを開いている時に自動で10秒毎に永遠と切り替えたいのですが、
|
|
28
|
-
|
|
29
|
-
現状だと背景画像が固定のままで変化しない状態です。
|
|
30
|
-
|
|
31
|
-
cssの.bg_img{}内にある
|
|
32
|
-
|
|
33
|
-
「background-image : url("doraemon_background_1.png");」を消すと、背景画像すら表示されなくなります・
|
|
34
|
-
|
|
35
|
-
それ以外の文章・画像やその後ろにある背景色の切り替えは正常に機能しています。**__
|
|
36
|
-
|
|
37
41
|
|
|
38
42
|
|
|
39
43
|
・回答のコードを試しましたが、下記の様な状態になっています。
|
|
@@ -44,6 +48,8 @@
|
|
|
44
48
|
|
|
45
49
|
→赤信号の様にrepeatせず、後ろの空の画像の様に1枚で画面をcoverできるようにしたい。
|
|
46
50
|
|
|
51
|
+
|
|
52
|
+
|
|
47
53
|
|
|
48
54
|
|
|
49
55
|
|
3
問題が発生している箇所のスクショを追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -36,6 +36,16 @@
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
+
・回答のコードを試しましたが、下記の様な状態になっています。
|
|
40
|
+
|
|
41
|
+
→切り替えの画像がテキストの上に来てしまう。
|
|
42
|
+
|
|
43
|
+
→背景画像の切り替えは紫の透かしの下で行いたい
|
|
44
|
+
|
|
45
|
+
→赤信号の様にrepeatせず、後ろの空の画像の様に1枚で画面をcoverできるようにしたい。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
39
49
|
|
|
40
50
|
|
|
41
51
|
```html
|
2
記載して頂いたコードに変更しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
-
.b
|
|
115
|
+
.bg_img .hat{
|
|
116
116
|
|
|
117
117
|
position : absolute;
|
|
118
118
|
|
|
@@ -132,13 +132,13 @@
|
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
|
|
135
|
-
.b
|
|
135
|
+
.bg_img .src1 {
|
|
136
136
|
|
|
137
137
|
background-image : url("doraemon_background_1.png"); /* 背景の画像を指定 */
|
|
138
138
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
.b
|
|
141
|
+
.bg_img .src2 {
|
|
142
142
|
|
|
143
143
|
background-image : url("doraemon_kabegami1.png"); /* 背景の画像を指定 */
|
|
144
144
|
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
|
|
147
147
|
}
|
|
148
148
|
|
|
149
|
-
.b
|
|
149
|
+
.bg_img .src3 {
|
|
150
150
|
|
|
151
151
|
background-image : url("doraemon_background2.png"); /* 背景の画像を指定 */
|
|
152
152
|
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
-
.b
|
|
157
|
+
.bg_img .src4 {
|
|
158
158
|
|
|
159
159
|
background-image : url("doraemon_kabegami1.png"); /* 背景の画像を指定 */
|
|
160
160
|
|
|
@@ -162,8 +162,6 @@
|
|
|
162
162
|
|
|
163
163
|
}
|
|
164
164
|
|
|
165
|
-
|
|
166
|
-
|
|
167
165
|
@keyframes bgAnime {
|
|
168
166
|
|
|
169
167
|
0% { opacity: 0; }
|
1
今の問題にどういう現象が発生しているか記載しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -24,6 +24,18 @@
|
|
|
24
24
|
|
|
25
25
|
時間で背景画像を切り替えようとすると上手くいきません。
|
|
26
26
|
|
|
27
|
+
__ →サイトを開いている時に自動で10秒毎に永遠と切り替えたいのですが、
|
|
28
|
+
|
|
29
|
+
現状だと背景画像が固定のままで変化しない状態です。
|
|
30
|
+
|
|
31
|
+
cssの.bg_img{}内にある
|
|
32
|
+
|
|
33
|
+
「background-image : url("doraemon_background_1.png");」を消すと、背景画像すら表示されなくなります・
|
|
34
|
+
|
|
35
|
+
それ以外の文章・画像やその後ろにある背景色の切り替えは正常に機能しています。**__
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
27
39
|
|
|
28
40
|
|
|
29
41
|
```html
|
|
@@ -88,6 +100,8 @@
|
|
|
88
100
|
|
|
89
101
|
.bg_img {
|
|
90
102
|
|
|
103
|
+
background-image : url("doraemon_background_1.png");
|
|
104
|
+
|
|
91
105
|
background-size: cover;
|
|
92
106
|
|
|
93
107
|
min-height: 100vh;
|