如何結合背景圖像和CSS漸變

不知道我在這裏出了什麼問題。漸變顯示正常，但圖像不是。如何結合背景圖像和CSS漸變

頁就設在這裏（WordPress站點）：

http://philfaranda.staging.spatialmatch.com/

body { 
    background-color: #FFF !important; /* fallback color if gradients are not supported */ 
    background: #fff url(/wp-content/uploads/2013/01/body-bg2.png) repeat-x !important; 
    background-image: -webkit-linear-gradient(top, #fff, #A9A9A9) !important; /* For Chrome and Safari */ 
    background-image: -moz-linear-gradient(top, #fff, #A9A9A9) !important; /* For old Fx (3.6 to 15) */ 
    background-image:  -ms-linear-gradient(top, #fff, #A9A9A9) !important; /* For pre-releases of IE 10 */ 
    background-image:  -o-linear-gradient(top, #fff, #A9A9A9) !important; /* For old Opera (11.1 to 12.0) */ 
    background-image:   linear-gradient(to bottom, #fff, #A9A9A9) !important; /* Standard syntax; must be last */ 
}

編輯：似乎也漸變效果的心不是顯示在IE瀏覽器，圖像...

謝謝提前尋求幫助， Ken

來源

2013-02-19 Ken

您的頁面不可用。一個錯字？ – 2013-02-19 20:53:05

我在FF和IE中加載罰款 – Ken 2013-02-19 20:54:53

這裏不必要的wordpress標籤 – jjj 2013-02-19 21:27:21

background-image ovverides backgorund。爲了使它正常工作，還需要單獨指定background-repeat。測試在FF

body{ 
    background-color: #fcfcf0; 
    background-repeat:repeat-x; 
    background-image: url(../img/abdul.jpg), -moz-linear-gradient(top, #fff, #A9A9A9); 
    /* And the same with other ugly prefixes */ 
    /* For older IE*/ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#A9A9A9'); 
}

在肯的意見後，似乎會有問題與IE 9它不能處理漸變和圖像。

現在，要使其在IE中工作，您應該添加類似於上述代碼段的漸變，而不是將您的整個內容包裝爲div，您應該爲其添加圖像css。

<body style="gradients styles..."> 
<div style="background-image styles"> 
Your content 
</div> 
</body>

來源

2013-02-19 20:54:44

這似乎不起作用，我改變了每個定義，就像你的例子。在你的例子中，雖然在#A9A9A9和#fff網址（。 – Ken 2013-02-19 21:06:06

）之間錯過了一個逗號，對不起，它仍然需要修改一下，幾分鐘後就會更新。問題是重複。 – 2013-02-19 21:23:33

其實，Just注意，既沒有梯度也沒有圖像顯示在IE現在:( – Ken 2013-02-19 21:46:44

如何結合背景圖像和CSS漸變

回答

相關問題