CSS - 背景漸變和背景圖像發送到底部

我想設置背景漸變和定位到頁面底部的圖像。我似乎不能讓展位工作。這裏是我的代碼：CSS - 背景漸變和背景圖像發送到底部

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

如何獲得兩者兼而有之？

此圖片：

enter image description here

對這種顏色的頂部。

enter image description here

來源

2014-03-30 Makai

您可以發佈你目前得到的東西的截圖？ – manosim

另外，你能否嘗試解釋你想要發生的事情。你想在背景圖像上使用背景顏色嗎？具有漸變後退的背景圖像？ –

顏色上的圖像。 – Makai

你需要將網址添加作爲第一個背景圖像選項

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

這裏是一個小提琴.. http://jsfiddle.net/THWLM/

enter image description here

來源

2014-03-30 04:44:05

我做了同樣的事情，但我做了倒退。 – Makai

CSS - 背景漸變和背景圖像發送到底部

回答

相關問題