多個CSS背景，忽略圖像的顏色，忽略

這個多背景CSS行有什麼問題。 Firefox 4會忽略它（就像它出現語法錯誤時那樣）。多個CSS背景，忽略圖像的顏色，忽略

background: rgba(255,0,0,0.2), url("static/menubg.jpg");

來源

2011-05-01 Bart van Heukelom

待辦事項你有任何其他背景相關的標籤在你的CSS？ – Arjan 2011-05-01 21:58:23

@Arjan：我有一個'background-size'來縮放圖像，但是我在發佈之前將其刪除並進行了測試。 – 2011-05-02 11:20:11

在CSS3背景爲background的語法是[ <bg-layer> , ]* <final-bg-layer>，這意味着零個或多個<bg-layer>s，然後單個<final-bg-layer>，用逗號彼此分離。見http://www.w3.org/TR/css3-background/#the-background

甲<final-bg-layer>定義爲：

<final-bg-layer> = <bg-image> || <bg-position> [/<bg-size> ]? || 
        <repeat-style> || <attachment> || <box>{1,2} || 
        <'background-color'>

而<bg-layer>是：

<bg-layer> = <bg-image> || <bg-position> [/<bg-size> ]? || 
       <repeat-style> || <attachment> || <box>{1,2}

（均爲http://www.w3.org/TR/css3-background/#ltbg-layergt定義）。

或者簡單地說，只有最低的背景層可以包含背景顏色。所以是的，你的CSS實際上是一個語法錯誤。

哦，看起來像https://developer.mozilla.org/en/css/multiple_backgrounds有一些錯誤。我修復了它們。

來源

2011-05-01 23:59:46

有一個很好的參考+1;我沒有想過尋找我的答案的權威來源。 – 2011-05-02 00:02:27

自該更改以來，該MDC頁面上的「現場演示」似乎無法正常工作。 – thirtydot 2011-05-02 02:18:53

確實。而爲了更加有趣，我所做的任何改變都不應該影響到這一點，並且恢復到工作版本不起作用：wiki聲稱現在的文本與工作版本相同，但它產生的實際標記很明顯不同。我郵寄了維基維護者。我討厭維基。 :( – 2011-05-02 03:16:17

應該background: rgba(255,0,0,0.2) url("static/menubg.jpg");沒有,

來源

2011-05-01 21:42:30 morgar

這就是當您使用具有顏色作爲後備的背景圖像時。我嘗試多個背景：https://developer.mozilla.org/en/css/multiple_backgrounds – 2011-05-01 21:44:27

我明白，我不知道這種格式，我會看看 – morgar 2011-05-01 21:46:53

奇怪的是，似乎歸結爲參數的順序;背景圖像然後背景色：

background: url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%, rgba(255,180,0,0.8);

工程（JS Fiddle demo），而背景色然後背景圖像：

background: rgba(255,180,0,0.8), url('http://davidrhysthomas.co.uk/linked/astrid_avatar.png') no-repeat 50% 50%;

不（JS Fiddle）。

上面在Chromium 11和Firefox 4上進行了測試，都在Ubuntu 11.04上進行了測試。

編輯要注意，這的確的確下降到了順序;如在 @Boris' answer中明確回答的那樣。

來源

2011-05-01 21:59:17

您應該注意，因爲漸變被視爲圖像，它是可以接受的，並且可以用於放置具有相同頂部和底部顏色的漸變。

來源

2011-07-20 16:37:25

使用的解決方案：

{-moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(bg.png) repeat 0 0;}

代替：（！謝謝）

rgba(0, 0, 0, 0.5)

來源

2011-11-10 15:23:16 Oscar

這是一個很好的解決方案，謝謝！ – AlexKempton 2013-03-15 14:30:34

Nice，bu我們怎樣才能使這項工作跨瀏覽器？ – Arcolye 2013-04-08 04:16:32

都會響起奧斯卡的很好的解決方案，這裏是我是如何實現它使用SASS /北斗自動化瀏覽器前綴

@include background(linear-gradient(color-stops(rgba(255, 66, 78, 0.25), rgba(255, 66, 78, 0.25))), image-url('/img/cardboard_flat.png'));

這支持Webkit，Firefox，但不支持IE9（因爲漸變）。然後我想起了PNG圖像生成的真棒指南針rgbapng紅寶石寶石：https://github.com/aaronrussell/compass-rgbapng

@include background(png_base64(rgba(255, 66, 78, 0.25)), image-url('/img/cardboard_flat.png'));

現在，這種支持IE9 +，並支持多背景的瀏覽器的其餘部分。

如果您仍需要IE8的支持，您既可以使用多背景填充工具，或樣式的僞::元素後，絕對位置，也爲-1的的z-index：

html { 
    height: 100%; 
} 

body { 
    background: url('/img/cardboard_flat.png'); 
    position: relative; 
    padding: 1px 0; 
    min-height: 100%; 

    &:after { 
    content: ""; 
    position: absolute; 
    background: png_base64(rgba(255, 66, 78, 0.25)); 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    } 
}

來源

2013-08-27 17:33:57

多個CSS背景，忽略圖像的顏色，忽略

回答

相關問題