css - css伪元素的SVG回退？

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;
}

---

编辑:

但这不会解决您的回退问题，您应该考虑其他选择。这些包括但不限于:

• 填充
• 条件语句
• 服务器端图像转换