php替换时 css中的图片不显示不出来,CSS装饰加载失败的图片（译）

但它们不是必须这样，我们可以使用CSS去修饰，由此对加载失败的图片赋予好看的样式。

两个关于标签的表现

为了理解我们怎样装饰加载失败的图片，我们需要先了解两个关于元素的行为表现。

我们可以给img添加字体样式，那些样式会被施加到alt属性中的替代文字里。如果图片正常显示，那么文字将不会出现。

元素是一个替换元素(样式和尺寸会被外部资源替代)。因为图片会被替代，那么上的:before和:after这样的伪元素就不会成功显示，但是如果图片未加载成功，那么这些伪元素就会显示出来。

因为这些特性，我们可以给那些未成功加载的元素添加一些样式，当图未加载成功的时候，样式可以显现；如果加载成功，对图片也不会有影响。

来，试试吧

用我们知道的两条特性，我们做了一些例子来装饰未加载的图片。

先看看html

添加一些有效内容

我们可以通过使用attr( )来优化未成功加载的图片的显示。

img {

font-family: 'Helvetica';

font-weight: 300;

line-height: 2;

text-align: center;

width: 100%;

height: auto;

display: block;

position: relative;

}

img:before {

content: "We're sorry, the image below is broken :(";

display: block;

margin-bottom: 10px;

}

img:after {

content: "(url: " attr(src) ")";

display: block;

font-size: 12px;

}

通过替换默认的替代文字

我们可以通过伪元素去替代alt文字，通过定位伪元素，使它覆盖在alt文字上。

img { /* Same as first example */ }

img:after {

content: "\f1c5" " " attr(alt);

font-size: 16px;

font-family: FontAwesome;

color: rgb(100, 100, 100);

display: block;

position: absolute;

z-index: 2;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #fff;

}

其他样式

通过替代一些本地信息，我们可以使用伪元素更好地修饰未成功加载的图片

img {

/* Same as first example */

min-height: 50px;

}

img:before { content: " ";

display: block;

position: absolute;

top: -10px;

left: 0;

height: calc(100% + 10px);

width: 100%;

background-color: rgb(230, 230, 230);

border: 2px dotted rgb(200, 200, 200);

border-radius: 5px;

}

img:after {

content: "\f127" " Broken Image of " attr(alt);

display: block;

font-size: 16px;

font-style: normal;

font-family: FontAwesome;

color: rgb(100, 100, 100);

position: absolute;

top: 5px;

left: 0;

width: 100%;

text-align: center;

}

浏览器兼容情况

遗憾的是，有一些浏览器还是无法兼容这样的问题。虽然有些浏览器当图片未加载成功是无法正常显示伪元素的内容，但是这并不影响我们使用。小伙伴们快尝试起来吧！

后话

如对我的文章感兴趣，请关注微信公众号“每日前端”，每天分享一篇优质前端文章。