javascript CSS - 第一个图像未加载时的额外背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7816951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Extra background image for when the first image doesn't load?
提问by tylerl
Okay, let's say you have something like this:
好的，假设你有这样的事情：
<span class="image" style="background-image: url('http://www.example.com/images/image1.png')"></span>
Every CSS tutorial I've ever read has covered the concept of using a background color after the background-image code, which of course takes the place of the image when one is unavailable, but...
我读过的每个 CSS 教程都涵盖了在背景图像代码之后使用背景颜色的概念，这当然会在图像不可用时代替图像，但是......
How do you specify a backup background-image - one that should be displayed if the image referenced is unavailable? If there's no CSS trick for this, maybe JavaScript could handle it?
您如何指定备份背景图像 - 如果引用的图像不可用，则应显示该图像？如果没有 CSS 技巧，也许 JavaScript 可以处理它？
采纳答案by Matt Tew
Simple answer:
简单回答：
You could either nest the span inside another span - with the outer span set to use the backup background image. If the inside span's background isn't available, then you'll see the outside one's
您可以将跨度嵌套在另一个跨度内 - 将外跨度设置为使用备份背景图像。如果内部跨度的背景不可用，那么您将看到外部的
Better, more difficult answer:
更好，更难的答案：
You could achieve a similar result in pure CSS, by adding some psuedo content before the span, and then styling that to have the fallback background. However, this usually takes some trial and error to get it right;
您可以在纯 CSS 中获得类似的结果，方法是在 span 之前添加一些伪内容，然后将其设置为具有后备背景的样式。但是，这通常需要反复试验才能正确；
Something lile
小东西
span.image:before{content:" "; background:url(backup.png); display: block; position:absolute;}
回答by sidonaldson
In modern browsers you can chain background images and have more than one on each node. You can even chain background-position and background-repeat etc! This means you can declare your first image (which is the fallback) and then the second one appears over it, if it exists.
在现代浏览器中，您可以链接背景图像并在每个节点上拥有多个背景图像。您甚至可以链接背景位置和背景重复等！这意味着您可以声明您的第一个图像（这是后备图像），然后第二个图像出现在它上面（如果它存在）。
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;
回答by albert
Just declare the preferred default image after your background declaration:
只需在背景声明后声明首选默认图像：
.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 the dimensions of your img, so they are "xxpx" working demo: http://jsfiddle.net/jalbertbowdenii/rJWwW/1/
idk img 的尺寸，因此它们是“xxpx”工作演示：http: //jsfiddle.net/jalbertbowdenii/rJWwW/1/
回答by BinderNews
Well, I know that the actual tag has onload, onerror, and onabort events. You could try loading it in an image, then if that succeeds, use JS to set the background property of the body.
嗯，我知道实际的标签有 onload、onerror 和 onabort 事件。您可以尝试将其加载到图像中，然后如果成功，则使用JS设置主体的背景属性。
EDIT: Never mind. I like his answer better.
编辑：没关系。我更喜欢他的回答。
