html - CSS - 背景渐变和背景图像发送到底部

Question

我正在尝试使用渐变和位于页面底部的图像设置背景。我似乎无法让 booth 工作。这是我的代码:

body{
    /* IE10 Consumer Preview */ 
    background-image: -ms-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

    /* Opera */ 
    background-image: -o-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #00A3EF 100%);

    background-image:url("Water.png");
    background-size: 100%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:bottom; 
}

如何同时获得两者？

这张图片:

在此颜色之上。

Answer 1

您需要添加 url 作为第一个背景图像选项

background-image:url("water.jpg"), radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #00A3EF 100%);

这是一个 fiddle .. http://jsfiddle.net/THWLM/