首页 文章

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

提问于
浏览 次
1

我正在尝试将固定高度的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中完全执行此操作（不使用图像） . 谢谢 .

css gradient

2 回答

  • 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 .

    回复于
  • 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 */
}
    回复于

相关问题