多個CSS底色回退

Question

想做下一個CSS背景回退：

1. Solid color 
2. If linear-gradient supports by browser, change background to gradient 
3. If RGBa supports by browser, change background to half transparent linear-gradient 

這很容易，但：

4. If image loaded, change background to image, otherwise use fallbacks. 

有誰知道，如何做到這一點？ :-)

Answer 1

如果您確切地閱讀了您發佈的內容，請採用相同的順序，並在您的css聲明中輸入。

1）大多數瀏覽器會重新建立一個堅實的背景，並將繼續到下一個屬性。

2）如果它理解線性漸變屬性，它將繼續到RGBA。如果沒有，它會在後臺停止：黑色。

如果瀏覽器不能識別某個屬性，它會跳過它直到找到它。例如。

div { 
     background: black; 
     background: rgba(0,0,0,0.5); 
     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); 


    } 

我希望這是有道理的:)

務必將您的後備代碼在你的「可疑」 CSS樣式的頂部。

就背景圖像而言，它的方式完全相同。將回退代碼放在屬性的頂部。例。

div { 
    background: black; 
    background: rgba(0,0,0,0.5); 
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.gravatar.com/avatar/3d321f809ba58efc88780b60ec431b43?s=32&d=identicon&r=PG&f=1"); 

}