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");

}

多个CSS背景后退

1 个答案: