1

我想让一个cssbackground-image成为一个从上到下的渐变，然后是一个颜色。例如，如果我想要顶部为 #FF0000 的渐变，距离顶部 400 像素的 #00FF00 ，然后立即切换到 #EFEFEF，该怎么做？background-image-repeat我可以使用某种形式吗？

4

3 回答 3

4

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

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

jsFiddle 预览

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

于 2012-09-09T20:44:18.337 回答
3

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

演示

background: #EFEFEF linear-gradient(#FF0000, #00FF00) repeat-x;
background-size: 1px 400px;
于 2012-09-09T20:43:59.977 回答
0

为您的渐变添加第三个停止也是一种选择（如果有支持渐变但不支持背景大小的浏览器）。将第 2 和第 3 个停靠点放置在 400 像素处，将第 3 个渐变的颜色作为您想要的背景颜色。

于 2012-09-10T02:37:40.470 回答