###前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/08/20 19:28
2017/08/21 01:25
退会済みユーザー
2017/08/21 02:52 編集
退会済みユーザー
2017/08/23 02:14