javascript - CSS - 当第一张图片未加载时的额外背景图片?

标签 javascript html css

好吧,假设你有这样的事情:

<span class="image" style="background-image: url('http://www.example.com/images/image1.png')"></span>

我读过的每个 CSS 教程都涵盖了在背景图像代码之后使用背景颜色的概念,当图像不可用时,它当然会代替图像,但是...

如何指定备份背景图像 - 如果引用的图像不可用,应显示该图像?如果没有 CSS 技巧,也许 JavaScript 可以处理它?<​​/p>

最佳答案

在现代浏览器中,您可以链接背景图像并在每个节点上拥有多个背景图像。您甚至可以链接 background-position 和 background-repeat 等! 这意味着您可以声明您的第一张图片(这是备用图片),然后第二张图片出现在它上面(如果存在)。

background-color: black;
background-image: url("https://via.placeholder.com/300x300?text=Top Image"), url("https://via.placeholder.com/300x300?text=Failed To Load");
background-position: 0 0, 0 0;
background-repeat: no-repeat, no-repeat;

JFIDDLE DEMO

关于javascript - CSS - 当第一张图片未加载时的额外背景图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7816951/

相关文章:

CSS:带有十字标签和水平标签的div

html - 底部自定义边框

javascript - 为什么读取一个多于索引的数组不会抛出错误?

jquery - 为什么函数中的每个表都会给出错误的结果 - jQuery

javascript - 在 D3 中创建步进比例

javascript - 在显示菜单之前如何使背景链接不可点击?

html - 想要这个表格在完美的中心

html - 如何使用 css/html 在句子中间使用图标/图像

javascript - 如何使用 sentry v5 全局忽略错误以减少噪音

javascript - 在 ng-repeat 内的表达式中调用的 Angularjs 函数没有被调用?