设置图片无法显示时的默认样式

原文地址:Styling Broken Images

Broken images(即网页中图片无法显示或加载时显示的图片)是很难看的。

无法加载图片显示的样式

但它们不一定只能这样显示。我们可以通过给 img 元素应用 CSS 来提供一个比默认样式更好的体验。

两点关于 img 元素的知识点

为了理解我们如何设计 broken images 的样式,我们需要先理解两点关于 img 元素的表现机制。

  1. 我们可以给 img 元素应用常规的字体排版相关的样式。这些样式会应用在替换文字上,如果显示出来的话,并且它不会对生效的图片产生作用。
  2. img 元素是一个替换元素。这是一种“外观和尺寸都能被外部资源定义”(Sitepoint)的元素。因为这个元素由外部资源控制,所以典型的如 :before 和 :after 伪元素对它无效。但是,当图片无法读取或者加载的时候,这些伪元素就会展示出来。

正因为这两个原理,我们可以给 img 元素应用样式,这些样式会在图片无法加载时生效,并且不会对正常加载的照片产生影响。

付诸实践

通过上面那些信息,我们来进行一个实际练习,使用下面这个不存在的链接获取图片

添加有用信息

其中一种我们处理 broken images 的方法是提供一个信息给使用者告知他们这个图片无法获取。通过使用 attr() ,我们甚至可以在 broken image 中展示这个图片的原始链接。

attr展示broken图片

替换默认的 alt 文本

除了上面那种方法,我们可以通过伪元素来代替默认展示的 alt 属性文本,通过把伪元素定位在默认的 alt 文本上方进行覆盖文本即可。

替代alt文本

特别的样式

为了显示(或者替换)自定义信息,我们可以通过伪元素给 broken image 应用更多的样式。

extra styling

如果图片可以正常加载,并且也应用了上面那些样式,那么图片会正常展示,伪元素并不会生效。

imagenotbroken

浏览器兼容

不幸的是,并不是全部浏览器都能使用一致的方式处理 broken images。对于某些浏览器来说,即使图片没有正常显示,伪元素也不会生效。

下面是我通过例子测试出来的关于浏览器的兼容性。

浏览器兼容

*alt 文本只会在图片宽度足够大的情况下显示。如果没有指定图片的宽度,那么 alt 文本不会显示。

**字体格式不会生效

对于那些不支持伪元素的浏览器,相关的样式会被忽略,所以他们并不会产生冲突。这意味着我们仍然可以应用更多的样式,提供给那些使用支持这些样式的浏览器的使用者更加愉快的体验。

发表评论

电子邮件地址不会被公开。 必填项已用*标注