Question

好吧，假设你有这样的事情：

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

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

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

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中实现类似的结果，方法是在跨度之前添加一些伪造的内容，然后设置为具有后备背景的样式。但是，这通常需要一些反复试验才能做到正确;

某事lile

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

Answer 3

在背景声明后声明首选默认图像：

.image
{
    background: #000 url('http://www.example.com/images/image1.png') 0 0 no-repeat;
    width: xxpx;
    height: xxpx;
    background-image: url('http://www.example.com/images/image1.png');
}

<span class="image"></span>

idk img的尺寸，所以它们是“xxpx” 工作演示：http://jsfiddle.net/jalbertbowdenii/rJWwW/1/

Answer 4

嗯，我知道实际的标签有onload，onerror和onabort事件。你可以尝试在图像中加载它，如果成功，使用JS来设置正文的背景属性。

编辑：没关系。我更喜欢他的答案。

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

4 个答案:

简单回答：

更好，更难回答：