css - 多个 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");

}