多背景CSS3按鈕（+透明度）

這是我的代碼至今：多背景CSS3按鈕（+透明度）

background: none; 
background-image: url(../images/red-button-bg-left.png), url(../images/red-button-bg-tile.png), url(../images/red-button-bg-right.png); 
background-repeat: no-repeat, repeat-x, no-repeat; 
background-position: 0 0, 19px 0, 100% 0;

按鈕看起來像：

[left corners image][body image][right corners image]

Normaly我的代碼會工作，但是，在這種情況下， url(../images/red-button-bg-tile.png)位於左側和右側圖像下方，並且由於它是透明的，所以會弄亂按鈕樣式。

有什麼訣竅？

來源

2011-06-16 Gajus

這將更容易回答您的按鈕[jsFiddle演示]（http://jsfiddle.net/）。您可以在[http://imgur.com/](http://imgur.com/）舉辦圖片。 – thirtydot 2011-06-16 15:24:17

CSS 3文檔說：「列表中的第一個圖像是距離用戶最近的圖層，下一個被繪製在第一個圖層後面，等等。」 http://www.w3.org/TR/css3-background/#layering如果沒有發生，最有可能是一個瀏覽器錯誤。您使用哪個瀏覽器進行測試？ – RoToRa 2011-06-16 15:27:47

問題是圖像是透明的@RoToRa。 – Gajus 2011-06-16 16:28:52

設置一個透明的左右邊框，左邊的寬度爲&，右邊的圖像爲background-clip:padding-box;，僅用於平鋪背景。如果這聽起來不清楚，我很樂意編輯你提供的小提琴。

來源

2011-06-17 12:35:04

訣竅是不要在您的尾件上使用透明度。最簡單的做法是使透明部分與主背景具有相同的顏色。你的中間背景在整個畫面中都是平鋪的，透過透明區域展示。

由於您使用CSS3已經（多背景），這取決於你的圖片是什麼樣子，你也可以切換到border-radius（或將其用於您的四捨五入，也將讓你的背景架勢，假設透明度是四捨五入的角落）和漸變背景。

來源

2011-06-16 15:27:29 Shauna

你有沒有嘗試在css中重新排序背景值？例如把url（../ images/red-button-bg-tile.png）放在最後或第一個位置，然後改變位置並相應地重複。

來源

2011-06-16 15:28:09 Tsar

多背景CSS3按鈕（+透明度）

回答

相關問題