我正在尝试将固定高度的CSS渐变背景渐变为一种颜色但不重复渐变。
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中完全执行此操作(不使用图像)。感谢。
答案 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
。