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

我想让一个固定高度的CSS渐变背景淡入一种颜色但不重复渐变。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中完成（不使用图像）。谢谢。

来源

2017-07-14 Qwerty

现在你可以放弃前缀。你也可以添加一个'background-color'并最终使用'background-size'来代替设置一个'height'。与'高度'：https://codepen.io/gc-nomade/pen/VWRrrX与'背景大小'和没有'高度'https://codepen.io/gc-nomade/pen/owVoGp适用于HTML标签... –

@GCyrillus会在所有浏览器中添加bg颜色工作吗？ – Qwerty

是的，如果您有任何旧浏览器可以看到后备工作，请在您有疑问时阅读规格并尝试使用笔中的代码段。线性渐变之前，用于设置渐变图像+ bgcolor（1px X 50px重复horizontaly;））请参阅https://developer.mozilla.org/en/docs/Web/CSS/background –

您可以设置您的网页（即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。

来源

2017-07-14 16:39:42

身高设置效果很好 – Qwerty

这是因为您将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 */ 
}

来源

2017-07-14 16:32:48 lumio

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

回答

相关问题