如何把失效的图片变得更友好?

Styling Broken Images

网页上失效的图片, 也就是那些红叉叉的大馒头, 我们可以通过样式来以一种更加有友好的方式呈现出来.

其实重点是要说一下原文中说到的replaced element, 在中文里面就是替换元素.

替换元素

A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (<img> tags), plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags). All other elements types can be referred to as non-replaced elements.

替换元素往往没有实际的内容, 即是一个空元素.

替换元素具有自己固有的尺寸 - 宽高由元素自身决定. 如果一个image标签width被设定成了auto, 那么该image链接图片的宽度就被会作为image的宽度. 同样地还有元素的宽高比例. 如果image元素的width被设值了, 100px吧, 如果链接图片是200x100的, 那么imageheight就是50px.

关于<img>的两个真相

  1. 我们可以把文本相关的属性应用到<img>标签上, 这些文本样式会应用到alt文本上, 但是不会影响正常的图片.
  2. <img>是替换元素. 当图片链接失效了的时候, :before:after 就会展现出来.

通过这两个特性, 我们就可以为失效的图片装饰装饰了, 而且不会影响正常显示的图片.

demo

要注意的是这是一个hack, 兼容性不是很好(具体兼容性情况请见原文), 并不能用在产品上, 不过玩一玩还是很不错的.

References:

可替换元素

Replaced Elements

CSS替换元素(Replaced element)

« 返回