Question

也许我对这个问题感到孤单，但无论如何我想寻求帮助。我开始创建一个双色背景，发现了一个错误首先这是我的代码：

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>

您可以在此处查看我的本地网页的屏幕截图：

渐变几乎可以正常工作，但正如您所看到的那样，有一个1像素的高度，100％宽的浅红色线，不应该在那里。我怎么能删除它？我已经尝试设置颜色停止或将其设置为0％，但它没有改变结果。

谢谢。

Answer 1

您也不应该将背景设置为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

此外，您可以删除width: 100%，因为body默认为block，并移至vh（这样就无需将100%设置为{{ 1}}）：

html

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

双色硬背景看起来不太好

1 个答案: