Question

我希望css background-image是一个从上到下的渐变，然后是一个颜色。例如，如果我想要顶部的＃FF0000渐变，＃00FF00从顶部400像素，并在此之后立即切换到#EFEFEF，它将如何完成？我可以使用某种形式的background-image-repeat吗？

Answer 1

实际属性称为background-repeat。您需要将其与background-size结合使用，以将渐变限制为400像素高并防止其平铺：

html {
    background-color: #efefef;
    background-image: linear-gradient(#ff0000, #00ff00);
    background-repeat: no-repeat;
    background-size: 100% 400px;
}

jsFiddle preview

当然，这假设您正在使用CSS3渐变，在这种情况下，浏览器支持不是问题，因为所有实现CSS3渐变的浏览器也实现background-size。但是，如果您使用渐变的图像文件并且需要支持旧浏览器，那么您将不得不创建一个额外的元素或具有适当高度和位置的伪元素，以仅包含渐变。 / p>

Answer 2

是的，使用background-color和渐变，设置正确的background-repeat＆amp; background-size。

DEMO

background: #EFEFEF linear-gradient(#FF0000, #00FF00) repeat-x;
background-size: 1px 400px;

Answer 3

在梯度中添加第3个停靠点也是一个选项（如果有浏览器支持渐变但不支持背景大小）。将第2和第3个位置放置在400px处，第3个渐变的颜色为所需的bg颜色。

渐变然后颜色背景？

3 个答案: