bodyタグに3つ以上の背景を指定したい.

###前提・実現したいこと
bodyタグに3つ以上の背景を指定したい.

###発生している問題・エラーメッセージ
下記のソースコードを実行すると,body background-colorで指定した赤色/青色/黄色の背景色に赤色/青色に対しては白みがかった放射状のグラデーションが反映されるのですが,黄色に対してのみに反映されません.また,複数のtestという文字が赤色の部分では確認できるのですが,青色,黄色の部分に到達すると後ろに隠れてしまいます.

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

html
1<!DOCTYPE html><html class=''>
2<head>
3<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
4<style class="test">* {
5  height: 100%;
6}
7
8body {
9    /*赤部分*/
10  background-color: red; 
11  position: relative;
12  
13  
14}
15body::before {
16    /*青部分*/
17  content: '';
18  position: absolute;
19  display: block;
20  background-color: blue;
21  height: 25%;
22  width: 100%;
23  bottom: 50%;
24}
25
26body::after{
27    /*黄色部分*/
28  content: '';
29  position: absolute;
30  display: block;
31  background-color: yellow;
32  height: 25%;
33  width: 100%;
34  bottom: 25%;
35}
36    .fog{
37  /*白い霧のような表現*/
38  background-image: radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 1));
39  width: 100%;
40  bottom: 0;
41  position: absolute;
42  overflow: hidden;    
43}
44</style></head><body>
45<center>
46    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
47</center>
48    <div class="fog"></div>
49
50
51
52
53</body></html>

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

回答2件

ベストアンサー

色分けだけならlinear-gradientでできます。center要素は非推奨なのでCSSを使いましょう。

HTML
1<div class="center">
2	test<br>test<br>test<br>test<br>test<br>test<br>test<br>
3	test<br>test<br>test<br>test<br>test<br>test<br>test<br>
4	test<br>test<br>test<br>test<br>test<br>test<br>test<br>
5	test<br>test<br>test<br>test<br>test<br>test<br>test<br>
6</div>
7<div class="fog"></div>

CSS
1html, body {
2  margin: 0;
3  padding: 0;
4  min-height: 100%;
5}
6body {
7  background-image: linear-gradient( to bottom, red, red 25%, blue 25%, blue 50%, yellow 50%, yellow 75%, red 75%, red );
8}
9.center {
10  text-align: center;
11}
12
13.fog{
14  background-image: radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 1));
15  width: 100%;
16  bottom: 0;
17  position: absolute;
18  /*overflow: hidden;*/
19  min-height: 100vw; /* ADD */
20}
21```**動くサンプル：**[https://jsfiddle.net/963m6s0e/](https://jsfiddle.net/963m6s0e/)
22
23---
24
25【CSS グラデーションの利用 - ウェブデベロッパーガイド | MDN】
26[https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients)
27
28【center 要素 - HTML | MDN】
29[https://developer.mozilla.org/ja/docs/Web/HTML/Element/center](https://developer.mozilla.org/ja/docs/Web/HTML/Element/center)
30> **非推奨**
31この機能は Web 標準から削除されました。まだサポートしているプラウザがあるかもしれませんが、ゆくゆくはなくなるものです。新旧にかかわらず、プロジェクトでの使用をやめてください。この機能を使用するページ、Web アプリはいつ動かなくなってもおかしくありません。
32
33
34---
35
36**追記：**
37
38To: コメント
39可能です。
40
41
42```CSS
43body {
44  background-image: linear-gradient( to left, red, red 25%, blue 25%, blue 50%, yellow 50%, yellow 75%, red 75%, red ),
45  linear-gradient( to left, blue 33%, yellow 33%, yellow 66%, red 66%, red ),
46  linear-gradient( to left, blue, blue 25%, yellow 25%, yellow 50%, red 50%, red 75%, blue 75%, blue );
47  background-repeat: no-repeat;
48  background-position: bottom;
49  background-size: auto 15%, auto 25%, auto;
50}
51```**動くサンプル：**[https://jsfiddle.net/963m6s0e/1/](https://jsfiddle.net/963m6s0e/1/)
52
53---
54
55【CSS での複数の背景の利用方法 - CSS | MDN】
56[https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds)
57
58【【CSS3】background-imageで複数の背景画像を表示する｜俺メモ Web時々アプリ | OREMEMO】
59[http://www.ore-memo.com/340.html](http://www.ore-memo.com/340.html)
60
61【background-size - CSS | MDN】
62[https://developer.mozilla.org/ja/docs/Web/CSS/background-size](https://developer.mozilla.org/ja/docs/Web/CSS/background-size)

投稿2017/08/20 05:46

編集2017/08/21 07:06

kei344

総合スコア69400

退会済みユーザー

2017/08/20 19:28

ご回答ありがとうございます。サンプルを拝見させていただきました。重ねて質問をさせていただきたいのですが、 bodyタグ内にlinear-gradient( to bottom, red, red 25%, blue 25%, blue 50%, yellow 50%, yellow 75%, red 75%, red );と linear-gradient( to left, red, red 25%, blue 25%, blue 50%, yellow 50%, yellow 75%, red 75%, red );といった2つのbackground-imageを適用することは可能でしょうか?

kei344

2017/08/21 01:25

どのような背景にしたいのか、最終的な形がわかりません。

退会済みユーザー

2017/08/21 02:52 編集

最終的に"http://www.fastpic.jp/viewer.php?file=6835805620.png"のような背景にしたいです。

退会済みユーザー

2017/08/23 02:14

大変参考になりました。ありがとうございます。

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

以下のやり方でいいと思います。

html
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5body {
6	margin: 0;
7}
8.back {
9	position: absolute;
10}
11.back div {
12	width: 100vw;
13	height: 25vh;
14}
15.back div:nth-child(1),
16.back div:nth-child(4) {
17	background-color: red;
18}
19.back div:nth-child(2) {
20	background-color: blue;
21}
22.back div:nth-child(3) {
23	background-color: yellow;
24}
25.fog {
26	background-image: radial-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 1));
27	width: 100vw;
28	height: 100vh;
29	position: absolute;
30	overflow: hidden;
31}
32.text {
33	width: 100%; 
34	position: absolute;
35	text-align: center;
36}
37</style>
38</head>
39<body>
40<div class="back">
41	<div></div>
42	<div></div>
43	<div></div>
44	<div></div>
45</div>
46<div class="fog"></div>
47<div class="text">
48	test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
49</div>
50</body>
51</html>