使用CSS的后备图像

我有一个< img>显示远程图像.
我想让它回退到另一个本地图像,在远程的图像无法访问的情况下.

<img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico"> 

.cc_image {
    width: 256px;
    height: 256px;
}

.cc_image.fallback {
    /* this URL here is theoretically a local one (always reachable) */
    background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
}

它的工作原理是,当找不到src图像时,将显示背景图像.

缺点是：

>它将始终加载背景图像(额外的HTTP请求)
>它在原始图像的位置显示了一个小的未找到图标(Safari上的问号),显示在背景图像上方(不是大问题,但我想摆脱它)

我怎么能解决这些问题？
或者：是否有其他技术可以达到相同的效果？

我找到了this question,但给定的解决方案依赖于Javascript或< object> (这似乎不适用于Chrome).我想要一个纯CSS / HTML解决方案,如果可能的话没有Javascript.

我知道多个背景图像,但我不确定它是否是一个不错的选择(浏览器支持？它会不会出现无法访问的图像吗？).
或者我在考虑将SVG图像嵌入为数据uri.

建议最灵活(和兼容)的方法？

不幸的是,如果没有Javascript或object标签,你就无法实现这两者.

您可以这样做以避免丢失图像图标：

将图像放在容器中(它可能已经放在一个容器中).
使容器具有与图像相同的宽度和高度.

>将后备图像设置为容器的背景图像.
>将远程图像设置为img标记的背景图像.
>加载1×1像素透明png作为图像的src(请参阅代码,了解如何在没有额外HTTP请求的情况下完成此操作).

码：

HTML

<!-- you could use any other tag, such as span or a instead of div, see css below -->
<div class="cc_image_container fallback">
    <img class="cc_image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image: url(*your remote image*)"/>
</div>

CSS

.fallback {
    background-image: url(*fallback image here*);
    display: inline-block; /*to ensure it wraps correctly around the image, even if it is a a or span tag*/
    min-width: specify a minimum width (could be the width of the fallback image) px; 
    min-height: specify a minimum height (could be the height of the fallback image) px;
    background-position: center center; // fallback for older browsers
    background-size: cover;
    background-repeat: no-repeat;
}

.cc_image {
    min-width: same as container px;
    min-height: same as container px;
    background-position: center center; // fallback for older browsers
    background-size: cover;
    background-repeat: no-repeat;
}

> min-width和max-width确保背景图像保持可见.> background-position确保图像的中心部分保持可见,并且对于旧版浏览器来说是优雅的降级> background-size调整背景图像的大小以填充元素背景.封面值意味着将调整图像大小以使其完全覆盖元素(图像的某些外边缘可能会被裁剪)> img src标记中的base64数据是透明的1px png.>这将有一个额外的好处,普通用户和一些机器人可能无法保存您的图像(基本的图像保护)>唯一的缺点是,对于后备映像,您仍然需要一个额外的HTTP请求.