CSS装饰加载失败的图片（译）

forsigner 发布于2019-08-30 12:51 / 3116人阅读

摘要：通过替换默认的替代文字我们可以通过伪元素去替代文字，通过定位伪元素，使它覆盖在文字上。其他样式通过替代一些本地信息，我们可以使用伪元素更好地修饰未成功加载的图片浏览器兼容情况遗憾的是，有一些浏览器还是无法兼容这样的问题。

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

但它们不是必须这样，我们可以使用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;
}

浏览器兼容情况

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

后话

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

私有云服务器托管加载css失败服务器图片加载失败 linux图片的加载 js实现数据的懒加载图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115112.html

【译】一个小时搭建一个全栈Web应用框架（下）——美化与功能

摘要：点击直达前文译一个小时搭建一个全栈应用框架上如果没有，但还是要继续学习本教程，可以到我的页面下载代码。从服务器返回随机语言的每当我们与服务器上的端点进行通话时，为了能够请求一个随机的欧洲语言，必须更改文件中的功能。翻译：疯狂的技术宅原文标题：Creating a full-stack web application with Python, NPM, Webpack and Reac...

Luosunce 2019-08-20 19:05 评论0 收藏0
【译】一个小时搭建一个全栈Web应用框架（下）——美化与功能

摘要：点击直达前文译一个小时搭建一个全栈应用框架上如果没有，但还是要继续学习本教程，可以到我的页面下载代码。从服务器返回随机语言的每当我们与服务器上的端点进行通话时，为了能够请求一个随机的欧洲语言，必须更改文件中的功能。翻译：疯狂的技术宅原文标题：Creating a full-stack web application with Python, NPM, Webpack and Reac...

Cheng_Gang 2019-07-30 14:35 评论0 收藏0
[译]如何构建自己的Progressive Image Loader

摘要：最后，我们必须调用函数来检查所有的渐进式图片容器在首次运行时是否在页面上可见。我们还必须在滚动页面或调整浏览器大小时调用函数，在一些旧的浏览器主要指可以非常迅速地对这些事件作出回应，所以我们需要限制回调，以确保它不能在毫秒内被再一次调用。你可以在Facebook和Medium上遇到过渐进式图片，当页面滚动到视图时，模糊的低分辨率图像会被清晰的全分辨率版本替换。 showImg(htt...

cartoon 2019-08-29 12:14 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0