Html CSS渐变背景不完整_Html_Css

Html CSS渐变背景不完整

html css

Html CSS渐变背景不完整,html,css,Html,Css,我试图设置我的页面渐变样式的整个背景，但是，它看起来像这样 CSS: HTML: <!DOCTYPE html> <html> <head> <title>Test</title>  <link rel="stylesheet" href=".../public/stylesheets/css_reset.css"> <!--

我试图设置我的页面渐变样式的整个背景，但是，它看起来像这样

CSS:

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
    <!--        Reset CSS-->
    <link rel="stylesheet" href=".../public/stylesheets/css_reset.css">
    <!--        Main CSS-->
    <link rel="stylesheet" href=".../public/stylesheets/main.css">
</head>
<body id="gradient">
<p>Hello World!</p>
</body>


</html>


试验
你好，世界

我意识到如果我加上高度：880px或某个高度的大小，这就是我希望它看起来的样子。但是有没有一种不设置高度的方法呢？我试过了

背景图像：线性渐变（至右下，#086A87，#00BFFF）
但它看起来仍然像第一个链接，除非我添加height
。发现我的页面的高度很烦人，我不想增加任何额外的高度，你可以看到我可以在第二张图片中向下滚动。如果添加height
是唯一的方法，那么有什么好方法可以定义我的页面的高度，这样就不需要向上/向下或向左/向右滚动
谢谢。
如果不想填充正文，可以设置css属性：
background-size: 100vw 100vh;

这将强制背景大小为视图端口的100%
如果不希望背景重复（如页面滚动）：
试着这样做：
CSS:
HTML:

你好，世界
以下是您的答案

更新您的css：
#gradient {
  background: #00BFFF;
  background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
  background: linear-gradient(to right bottom, #086A87, #00BFFF);
  border-radius: 2px;
  background-repeat: repeat;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

将body
和html
的高度设置为100%。身体高度通常与内容高度相同。意思是如果你的内容占了页面的50%，那么正文的高度大约是50%。正文：填充：0，边距：0
？但代码按原样工作。您正在使用CSS重置…对吗？是的，我正在使用Meyer CSS重置。如果您不想在页面上滚动，您可以设置html{height:100%；}
，或者您可以将html和正文设置为overflow:hidden，但我不建议这样做，因为这会在较小的屏幕上以及在您的页面上造成很多问题。
 background-repeat: no-repeat;

html {
    height: 100%;
}
body {
    margin: 0;
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
    background-size:100% 100%;
    background-repeat: no-repeat;
}

<body>
    <p>Hello World!</p>
</body>

html, body {
    height: 100%;
}
body {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#gradient {
  background: #00BFFF;
  background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
  background: linear-gradient(to right bottom, #086A87, #00BFFF);
  border-radius: 2px;
  background-repeat: repeat;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}