Image 带CSS的回退图像

我有一个

.cc_图像{
宽度：256px；
高度：256px；
}
.cc_image.fallback{
/*此URL理论上是本地URL（始终可访问）*/
背景图像：url（'https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
}

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

缺点是：

• 它将始终加载背景图像（附加HTTP请求）
• 它在原始图像的位置显示了一个小的未找到图标（Safari上的一个问号），它显示在背景图像的上方（这不是一个大问题，但我想去掉它）

我如何解决这些问题？ 或者：是否有其他技术可以达到同样的效果

我发现，但是给定的解决方案依赖于Javascript或

（这似乎在Chrome上不起作用）。我想要一个纯CSS/HTML解决方案，如果可能的话，没有Javascript

我知道多个

背景图像

，但不确定它是否是一个好的选择（浏览器支持？它是否会因无法访问的图像而后退？）。 或者我正在考虑将SVG图像嵌入为数据uri

---

关于最灵活（和兼容）方法的建议？

不幸的是，如果没有Javascript或object标记，您无法同时实现这两种方法

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

将图像放在容器中（可能已经在容器中）。 使容器具有与图像相同的宽度和高度

将回退图像设置为容器的背景图像

将远程图像设置为img标签的背景图像

加载1x1像素的透明png作为图像的src（请参阅代码，了解如何在无需额外HTTP请求的情况下完成此操作）

代码：

HTML

<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');
}

• 最小宽度

  和

  最大宽度

  确保背景图像保持可见

• background position

  确保图像的中心部分保持可见，并且对于较旧的浏览器来说是一种优雅的降级

• background size

  调整背景图像的大小以填充元素背景。

  cover

  值表示将调整图像大小，使其完全覆盖元素（图像的一些外边缘可能会被裁剪）
• img src标记中的base64数据是一个透明的1px png
• 这将有一个额外的好处，普通用户和一些机器人可能无法保存您的图像（基本的图像保护）
• 唯一的缺点是，对于回退映像，您仍然有一个额外的HTTP请求

---

我在Codepen上找到了一个解决方案，我想与您分享：

我更喜欢这个解决方案，因为它使用的是真实的图像标签，而不是背景图像

正文{
颜色：#2c3e50；
字体系列：“verdana”；
线高：1.35em；
填充：30px；
}
h1{
边缘底部：40px；
}
保险商实验室{
列表样式：无；
填充：0；
}
* {
框大小：边框框；
}
img{
颜色：#95a5a6；
字体大小：12px；
最小高度：50px；
位置：相对位置；
}
img：以前{
背景#f1f1；
边框：1px实心#ccc；
边界半径：3px；
内容：'\1F517''attr（alt）的断开图像；
显示：块；
左：0；
填充：10px；
位置：绝对位置；
顶部：-10px；
宽度：100%；
}

断开图像回退CSS




✓ 火狐
✓ 铬
✓ 歌剧院
✗ Safari（桌面、移动）
✗ iOS网络视图

可能相关-我认为您可以使用一个类作为后备映像，如下所示：最好的答案是使用具有alpha:thx@MadalinaTaina的映像，该映像让我寻找它！！该解决方案使用javascript。要求是保持可访问性并仅依赖于标记或CSS。这是一个了不起的解决方案！如果图像是圆形，则失败的图像元素将在伪元素外部留下一个矩形边框，除非您在伪元素上设置更大的大小，但这可能会影响您的操作layout@DrakeXiang-谢谢你的反馈。我不认为这有什么问题，我认为可以将伪元素设置为相同的边界半径。

<!-- 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>

.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;
}