通过CSS替换不可用的图像？

Question

是否可以通过CSS或使用其他技术替换标准的破碎图像？我的所有图像都是相同的大小,我的透明度.

我试图用div的背景包装所有图像:

<div class="no_broken">
  <img src="http://www.web.com/found.gif"/>
</div>

<div class="no_broken">
  <img src="http://www.web.com/notfound.gif"/>
</div>

CSS:

div.no_broken { 
  background-image: url(standard.gif); 
}

div.no_broken, div.no_broken img { 
  width: 32px; 
  height: 32px; 
  display: block; 
}

但如果IMG是透明的,这将在彼此之上显示两个图像.

Answer 1

这没有CSS工作:

<img src="some.jpg" onerror="this.src='alternative.jpg';">

当Javascript被禁用时,它似乎甚至可以工作.

Answer 2

是的，您可以使用伪选择器的技巧用 CSS 替换图像。

基本上，::before并且::after仅在图像加载失败时适用。您可以使用绝对定位将 CSS 伪元素放置在损坏的图像占位符上：

img {
    position: relative;
    width: 200px;
    height: 200px;
    display: inline-block;
    vertical-align: text-bottom;
}

    img::before {
        content: 'fall back';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        line-height: 200px;
        background-color: #fd0;
        color: currentColor;
        text-align: center;
        border-radius: 2px;
        display: block;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }

<img src="not-found">
<img src="https://via.placeholder.com/200">

此代码段根本不使用 JS，但仅适用于较新的浏览器。

Answer 3

如果您想在混合中添加一些 javascript，这应该可以很好地与 jQuery 配合使用，以检测图像错误并向损坏的图像添加某种错误状态 CSS 类。

$(document).ready(function () {
    $('.no_broken img').error(function () {
        $(this).addClass('broken');
    });
});

然后在你的 CSS 中你可以有类似的东西

div.no_broken, div.no_broken img { 
  width: 32px; 
  height: 32px; 
  display: block; 
}

div.no_broken img.broken {
    background-image: url(standard.gif);
    content:"";
}