如何停止使用CSS進行背景分層？

我使用<input type="submit">上的背景圖像來使它看起來像一個按鈕。所以我在我的CSS如下：如何停止使用CSS進行背景分層？

input.button { 
    background-image:url(/path/to/image.png); 
}

另外，我想顯示不同的圖像，當按鈕被禁用，以下CSS應該這樣做：

input.button[disabled] { 
    background-image:url(/path/to/disabled/image.png); 
}

的問題是，在iPhone瀏覽器那個被禁用的圖片是以上的是正常的，而不是它。我相信這是因爲CSS3允許多個背景圖像，因此Safari在繪製它們時最好。事實上，如果我使用background而不是background-image，FF4也會這樣做。然而，使用代碼，FF4完美地繪製了它。

所以，問題是，有沒有辦法以替換移動Safari中的現有背景圖像，而不是將其層疊在頂部？

來源

2011-05-05 vava

在我從我的圖片消除透明度，也增加了opacity: 1樣式表解決我的問題結束（否則移動Safari瀏覽器讓他們透明出於某種原因）

雖然中間解決方案的種類。

來源

2011-05-06 01:19:36 vava

您可以將兩個圖像合併爲一個較大的圖像，並使用滑動門技術（使用背景位置在啓用和禁用的圖像之間切換）。

來源

2011-05-05 06:28:29 Charlie

沒有，不起作用，它仍然繪製另一個圖像。 – vava 2011-05-05 07:01:13

你可以使用CSS精靈代替：

input.button { 
    background: transparent url(/p/2/img.png) no-repeat top left scroll; 
} 

input.button[disabled] { 
    background-position: bottom left; 
}

來源

2011-05-05 06:29:29

它仍然層疊在另一個之上。事實上，甚至用你的代碼FF4也是如此。停止它的方法是將背景快捷方式分隔爲背景圖像和背景位置。然而，移動Safari並不關心，它總是一個形象在另一個之上。 – vava 2011-05-05 07:00:35

怎麼樣分開類**按鈕**和**按鈕禁用** - 這種方式只有一個CSS選擇器匹配 – 2011-05-05 07:21:49

這將是作弊，不是嗎？ :) – vava 2011-05-05 07:42:40

如何停止使用CSS進行背景分層？

回答

相關問題