使用 CSS 的后备图像

Posted 2023-03-05

【中文标题】使用 CSS 的后备图像

【英文标题】：Fallback image with CSS

【发布时间】：2016-03-01 17:13:16

【问题描述】：

我有一个显示远程图像的<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 请求） 它在原始图像的位置显示一个小 not-found-icon（Safari 上的问号），它显示在背景图像上方（不是一个大问题，但我'想摆脱它）

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

我找到了this question，但给定的解决方案依赖于 javascript 或 <object>（这似乎不适用于 Chrome）。我想要一个纯 CSS/html 解决方案，如果可能的话不使用 Javascript。

我知道多个background-image，但不确定它是否是一个不错的选择（浏览器支持？它会以无法访问的图像回退吗？）。 或者我正在考虑将 SVG 图像嵌入为 data-uri。

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

【问题讨论】：

可能相关 - ***.com/questions/22051573/…

我认为你可以为后备图像使用一个类，如下所示：

使用具有 alpha 的图像的最佳答案：***.com/questions/8124866/… thx @MadalinaTaina 让我寻找它！

该解决方案使用 javascript。要求是保持可访问性并仅依赖标记或 CSS。

【参考方案1】：

很遗憾，如果没有 Javascript 或对象标记，您将无法同时实现这两者。

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

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

将备用图片设置为容器的背景图片。 将远程图片设置为img标签的背景图片。 加载一个 1x1 像素的透明 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 调整背景图像的大小以填充元素背景。 cover 值表示将调整图像大小，使其完全覆盖元素（图像的某些外边缘可能会被裁剪） img src标签中的base64数据是透明的1px png。 这将带来额外的好处，即普通用户和某些机器人可能无法保存您的图像（基本的图像保护） 唯一的缺点是，对于备用图片，您仍然会有一个额外的 HTTP 请求。

【讨论】：

这是一个了不起的解决方案！

【参考方案2】：

我在 Codepen 上找到了一个解决方案，想和大家分享一下： https://codepen.io/anon/pen/Eqgyyo

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

body 
  color: #2c3e50;
  font-family: 'verdana';  
  line-height: 1.35em;
  padding: 30px;

h1 
  margin-bottom: 40px;

ul 
  list-style: none;
  padding: 0;

* 
  box-sizing: border-box;


img 
  color: #95a5a6;
  font-size: 12px;
  min-height: 50px;
  position: relative;
  

img:before 
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 3px;
  content: '\1F517' ' broken image of 'attr(alt);
  display: block;
  left: 0;
  padding: 10px;
  position: absolute;
  top: -10px;
  width: 100%;

<h1>Broken image fallback CSS</h1>
<img src="no-image-here"  />

<br /><br />
<ul>
  <li>✓ Firefox</li>
  <li>✓ Chrome</li>
  <li>✓ Opera</li>
  <li>✗ Safari (desktop, mobile)</li>
  <li>✗ ios webview</li>
</ul>

【讨论】：

如果图像是圆形，则失败的图像元素将在伪元素之外留下一个矩形边框，除非您在伪元素上设置更大的尺寸，但这可能会影响您的布局

@DrakeXiang - 感谢您的反馈。我认为这没有问题，我认为您可以将伪元素设置为相同的边框半径。