使用CSS的候补图片

17 浏览
0 Comments

使用CSS的候补图片

我有一个，它展示了一个远程图片。

我想要它在远程图片不可用的情况下回退到另一个本地图片。

 
.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上是一个问号），该图像显示在背景图像的上方（不是一个大问题，但我想摆脱它）

我该如何解决这些问题？

或者：还有其他方法可以达到相同的结果吗？

我在 这个问题中找到了一些解决方案，但这些方案依赖于JavaScript或（在Chrome上似乎不起作用）。我希望能够使用纯CSS/HTML解决方案，如果可能的话不使用Javascript。我知道可以使用多个background-image，但不确定它是否是一个好的选择（浏览器支持？并且它会回退到一个无法访问的图片吗？）。或者我想通过嵌入SVG图像作为数据URI来解决问题。有关最灵活（并且兼容）的方法的建议？

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

我在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%;
}


Broken image fallback CSS

Cats with synthesizers in the space 


    
  
  • ✓ Firefox
    • 
  
  • ✓ Chrome
    • 
  
  • ✓ Opera
    • 
  
  • ✗ Safari (desktop, mobile)
    • 
  
  • ✗ iOS webview
    •

0
0 Comments

不幸的是，您不能在没有 Javascript 或对象标记的情况下同时实现这两个功能。

您可以这样做以避免缺少图像图标：

将您的图像放在一个容器中（可能已经在一个容器中）。

使容器具有与图像相同的宽度和高度。

  1. 将备用图像设置为容器的背景图像。
  2. 将远程图像设置为 img 标签的背景图像。
  3. 将大小为 1x1 像素的透明 png 作为图像的 src 加载（请参阅代码，以了解如何在没有额外HTTP请求的情况下完成此操作）。

代码：

HTML

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 请求。
0