如何修复渐变背景?

时间:2013-03-12 15:51:29

标签: html css styles gradient styling

我想知道是否可以修复来自html标记的渐变:

html, body, .wrapper {
    height: 100%;
}
body > .wrapper {
    height: 100%;
    min-height: 100%;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-attachment: fixed !important;
    background-image: green;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(green), color-stop(20%, #fff), color-stop(80%, #fff), color-stop(100%, green));
    background-image: -webkit-linear-gradient(left, green, #fff 20%, green 100%);
    background-image: -moz-linear-gradient(left, green, #fff 20%, green 100%));
    background-image: -o-linear-gradient(left, green, #fff 20%, green 100%));
    background-image: -ms-linear-gradient(left, green, #fff 20%, green 100%));
    background-image: linear-gradient(left, green, #fff 20%, green 100%));

}

这样当您调整渐变不移动的浏览器窗口大小时。

这可能吗?

非常感谢。

1 个答案:

答案 0 :(得分:3)

将其设置为特定的px值:

background: linear-gradient(to right, green 0%, #fff 300px, green 100%);

http://jsfiddle.net/GuMKd/

考虑使用此工具:http://www.colorzilla.com/gradient-editor/