2色の硬い背景がよく見えません

多分私はこの問題で一人でいますが、とにかく助けを求めたいと思います。私は2色の背景を作成し始め、バグを見つけました。
まず、これは私のコードです：2色の硬い背景がよく見えません

body, html { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #0000ff; 
 
    background: linear-gradient(180deg, #ff0000 50%, #0000ff 50%); 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Title here</title> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
     Content here ... Test 1 2 3 4 
 
    </body> 
 
</html>

あなたがここに私の地元のページのスクリーンショットを見ることができます：

勾配はほぼ正常に動作しますが、あなたのように100％の幅の明るい赤色の線で1ピクセルの高さがあることが分かります。どうすれば削除できますか？私はすでにカラーストップを設定しようとしましたが、0％に設定しましたが、結果は変わりませんでした。

ありがとうございます。

出典

2017-07-13 new-2-css-html

htmlにも背景を設定しないでください。bodyにのみ設定してください。また、あなたはスクロールバーを除去するためのmargin: 0を追加する必要があります。

body, 
 
html { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    background: linear-gradient(180deg, #ff0000 50%, #0000ff 50%); 
 
}

Content here ... Test 1 2 3 4

また、あなたはbodyはデフォルトでblockあるのでwidth: 100%を削除し、vhに移動することができます（これはに100%を設定する必要がなくなりますhtml）：

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    background: linear-gradient(180deg, #ff0000 50%, #0000ff 50%); 
 
}

Content here ... Test 1 2 3 4

出典

2017-07-13 02:21:33

2色の硬い背景がよく見えません

答えて

関連する問題