Question

我正在创建一个网站，我在.svg添加了一些装饰，但我知道有些浏览器无法显示它们，而且应该指定.png后备。

装饰添加了:after伪元素。这是否足以启用.png后备？

.section header h3:after {
    content: url("../images/ornament.svg");
    content: url("../images/ornament.png");
    width: 66px;
    height: 33px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -33px;
}

Answer 1

.png文件必须先出现。

.section header h3:after {
    content: url("../images/ornament.png");
    content: url("../images/ornament.svg");
    width: 66px;
    height: 33px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -33px;
}

修改

但这不会解决您的后退问题，您应该查看其他选项。这些包括但不限于：

polyfilling

条件陈述

服务器端图像转换

css pseudoelement的SVG后备？

1 个答案: