CSS - 第一张图像未加载时的额外背景图片？

Question

好吧,让我们说你有这样的事情:

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

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

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

Answer 1

在现代浏览器中,您可以链接背景图像,并在每个节点上拥有多个背景图像.你甚至可以链接背景位置和背景重复等!这意味着您可以声明第一个图像(即后备),然后第二个图像显示在它上面(如果存在).

background-color:black;
background-image: url("http://placekitten.com.s3.amazonaws.com/homepage-samples/200/138.jpg"), url("http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg");
background-position: 50% 50%, 0 0;
background-repeat: no-repeat, repeat;

JFIDDLE DEMO

Answer 2

简单回答:

您可以将跨度嵌套在另一个跨度内 - 外部跨度设置为使用备份背景图像.如果内部跨度的背景不可用,那么你会看到外面的那个

更好,更难的答案:

您可以在纯CSS中实现类似的结果,方法是在跨度之前添加一些伪相内容,然后设置为具有后备背景的样式.但是,这通常需要一些反复试验才能做到正确;

好莱坞

span.image:before{content:" "; background:url(backup.png); display: block; position:absolute;}