CSS装饰加载失败的图片(译)

Vagor

原文来自http://bitsofco.de/styling-broken-images/
翻译工作有本人担任,转载请注明出处。

图片描述

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

两个关于<img>标签的表现

为了理解我们怎样装饰加载失败的图片,我们需要先了解两个关于<img>元素的行为表现。
我们可以给img添加字体样式,那些样式会被施加到alt属性中的替代文字里。如果图片正常显示,那么文字将不会出现。

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

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

来,试试吧

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

先看看html

<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing">  

添加一些有效内容

我们可以通过使用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;
}

图片描述

浏览器兼容情况

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

后话

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

阅读 8.9k

努力努力早日成为前端攻城师
正在努力学习的前端小渣渣,华中科技大学大三学生。

稳住,稳住啊!!

716 声望
44 粉丝
0 条评论

稳住,稳住啊!!

716 声望
44 粉丝
文章目录
宣传栏