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

【问题标题】：CSS - Background gradient and background image sent to bottomCSS - 背景渐变和背景图像发送到底部
【发布时间】：2014-03-30 04:21:22
【问题描述】：

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

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; 
}

如何获得两者？

这张图片：

在这个颜色之上。

【问题讨论】：

你能发一张你目前得到的截图吗？
另外，您能否尝试解释一下您想要发生的事情。你想要背景图像上的背景颜色吗？带有渐变后备的背景图片？
图像上的颜色。

标签： html css image background gradient

【解决方案1】：

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

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

这是一个小提琴.. http://jsfiddle.net/THWLM/

【讨论】：

我做了同样的事情，但我倒退了。