来自 前端知识 2019-11-28 13:24 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

美化加载失败的图片

美化加载失败的图片

2016/05/13 · CSS · 图片

本文由 伯乐在线 - 王浩 翻译,sunshinebuel 校稿。未经许可,禁止转载!
英文出处:bitsofco.de。欢迎加入翻译组。

加载失败的图片会很难看。

澳门金莎娱乐手机版 1

但事实上并不总是一定要这样。我们可以用 CSS 在 <img> 标签上应用样式,来提供比默认情况更好的体验。

加载失败的图片会很难看。

两个关于 <img> 元素的真相

为了搞懂怎么样才能美化加载失败的图片,我们需要先了解关于 <img> 元素的两种表现方式。

  1. 我们可以在 <img> 元素上应用常规排版相关的样式。如果图片的备选文本显示的话,这些样式会在其上生效,并且不会影响正常加载的图片。

2. <img> 元素是替换元素。这是一种“外观和大小都由外部资源来决定的元素”(Sitepoint)。因为这个元素是由外部资源所控制,所以 :before 和 :after 伪元素一般不会跟它一起生效。但是,当图片损坏或者没有加载时,这些伪元素就会显示出来。

基于以上这两点,我们能够在 <img> 元素上应用只有当图片加载失败候会显示的样式,正常加载的图片并不会受到影响。

澳门金莎娱乐手机版 2

上手练习

利用这一信息,这里有几个美化加载失败图片的例子。需要用到下面这个损坏的链接。

XHTML

澳门金莎娱乐手机版 ,<img src="" alt="Kanye Laughing">

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

但事实上并不总是一定要这样。我们可以用 CSS 在 <img> 标签上应用样式,来提供比默认情况更好的体验。

添加有用的信息

处理加载失败图片的一种方法,就是给用户提示信息来说明图片加载失败了。我们甚至可以使用 attr() 这一语句来显示图片的链接地址。

澳门金莎娱乐手机版 3

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;
}

两个关于 <img> 元素的真相

为了搞懂怎么样才能美化加载失败的图片,我们需要先了解关于 <img> 元素的两种表现方式。

  1. 我们可以在 <img> 元素上应用常规排版相关的样式。如果图片的备选文本显示的话,这些样式会在其上生效,并且不会影响正常加载的图片。

2. <img> 元素是替换元素。这是一种“外观和大小都由外部资源来决定的元素”(Sitepoint)。因为这个元素是由外部资源所控制,所以 :before 和 :after 伪元素一般不会跟它一起生效。但是,当图片损坏或者没有加载时,这些伪元素就会显示出来。

基于以上这两点,我们能够在 <img> 元素上应用只有当图片加载失败候会显示的样式,正常加载的图片并不会受到影响。

替换默认的备选文本

或者,我们可以使用伪元素来替换显示出来的默认备选文本,通过在默认文本上方放置一个伪元素的方式,使其在视图中隐藏。

澳门金莎娱乐手机版 4

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}

上手练习

利用这一信息,这里有几个美化加载失败图片的例子。需要用到下面这个损坏的链接。

 

XHTML

 

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

 

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:美化加载失败的图片

关键词: