html - 渐变然后颜色背景？

Question

我想要一个 css background-image 是一个从上到下的渐变，然后是一种颜色。例如，如果我想要顶部的#FF0000 渐变，距离顶部 400 像素的#00FF00，然后立即切到#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。但是，如果您为渐变使用图像文件并且需要支持旧版浏览器，则您将不得不创建一个额外的元素或具有适当高度和位置的伪元素，以仅包含渐变。