CSS渐变背景无缩放,以一种颜色结束

时间:2017-07-14 16:28:58

标签: css gradient

我正在尝试将固定高度的CSS渐变背景渐变为一种颜色但不重复渐变。

Here's a codepen.

html {
    height: 50px;
    margin: 0;
    padding: 0;
    background: yellow;
    background: -webkit-linear-gradient(orange, yellow);
    background: -o-linear-gradient(orange, yellow);
    background: -moz-linear-gradient(orange, yellow);
    background: linear-gradient(orange, yellow);
    background-repeat: no-repeat;
}

我希望渐变以指定高度结束,然后让背景重复一种颜色。在codepen中,你可以看到渐变结束,但它是一个白色背景;我希望背景是黄色的。我想在CSS中完全执行此操作(不使用图像)。感谢。

2 个答案:

答案 0 :(得分:0)

那是因为您将HTML标记的样式设置为50px。您想要的是身体内部的包装,如<div id="wrapper"></div>,然后您可以将其设置为100vh高度。

像这样:

html, body {
  width: 100%
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: yellow;
}

#wrapper {
  width: 100%;
  height: 100vh;
  /* your background styles */
}

答案 1 :(得分:0)

您可以将页面的高度(即html)设置为50px,以便获得所有内容。要限制背景的大小,请使用background-size CSS属性。这是一个例子:

html {
  background: yellow;
}

body {
  height: 500px;
  margin: 0;
  padding: 0;
  background: -webkit-linear-gradient(orange, yellow);
  background: -o-linear-gradient(orange, yellow);
  background: -moz-linear-gradient(orange, yellow);
  background: linear-gradient(orange, yellow);
  background-repeat: no-repeat;
  background-size: 100% 50px;
}

但是,始终建议在正文中使用div容器,而不是使用html