照片破碎css,【第1845期】给破碎图片添加样式

原标题：【第1845期】给破碎图片添加样式

前言

文章是16年的，对体验倒是挺好的一个方案。今日早读文章由@zhangbao90s翻译授权分享。

@zhangbao，有三年前端开发经验，目前在上海工作。当前着重于对前端基础技术的学习，活跃于掘金(@zhangbao90s)。平时会经常翻看和翻译国外的一些技术文章，希望跟大家一起进步。

如果 的 src 属性值是一个无效地址，最终的渲染结果就很丑陋：

我们看到的是一个破碎的图片(Broken Images)：

元素上的两个事实

在理解给破碎图片添加样式的方式前，我们需要先学习 元素上存在的两个事实：

我们可以在 元素上使用常规的排版相关样式。这些样式会被应用到替换文本上(即 alt 属性值)，如果图片正常显示了，这些样式也不会影响图片的渲染。

元素是替换元素。这就表示“该类元素的外观和尺寸是受到外部资源控制的”(Sitepoint)。因为元素是受到外部资源控制的，因此 ::before、::after 伪元素的样式并不会影响图片渲染。然而，当图片因为地址无效或网络等原因加载失败后，伪元素就出现了。

正是基于上面的两个事实，才让我们为破碎图片设置样式成为可能。

撸代码

我们还是基于上面的无效图片地址