菜单

鼓吹加载战败的图纸

2019年11月14日 - 银河官方网站
鼓吹加载战败的图纸

美化加载失败的图片

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">

 

其他的美化样式

除了显示自定义信息(或者说换一种方法),我们还可以使用伪元素给加载失败的图片应用更多的样式。

银河官方网站 5

CSS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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;
}

如果加载成功,图片会正常显示所有的样式。伪元素也完全不会生成。

银河官方网站 6

添加有用的信息

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

银河官方网站 7

 

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;

}

   

 

浏览器兼容性

很不幸,不是所有的浏览器都可以用相同的方式处理加载失败的图片。对于某些浏览器,即使图片没有呈现,伪元素也根本不会显示。

这是我通过自己的测试得出的兼容性结论:

Browser Alt Text :before :after
Chrome (Desktop and Android)
Firefox (Desktop and Android)
Opera (Desktop)
Opera Mini ✓ **
Safari (Desktop and iOS) ✓ *
iOS Webview (Chrome, Firefox, others) ✓ *

*\ 备选文本只有在图片的宽度足够容纳它的时候才会显示。如果图片没有指定宽度,备选文本根本不会显示
\* 字体样式不生效*

至于那些不支持伪元素的浏览器,应用的样式会被忽略,所以它们不会产生破坏。这就是说我们仍然可以为那些使用支持伪元素浏览器的用户应用美化样式,提供更加友好的体验。

打赏支持我翻译更多好文章,谢谢!

打赏译者

替换默认的备选文本

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

银河官方网站 8

 

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

 

}

   

 

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

银河官方网站 9
银河官方网站 10

2 赞 3 收藏
评论

其他的美化样式

除了显示自定义信息(或者说换一种方法),我们还可以使用伪元素给加载失败的图片应用更多的样式。

银河官方网站 11

 

CSS

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

 

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

   

如果加载成功,图片会正常显示所有的样式。伪元素也完全不会生成。

银河官方网站 12

关于作者:王浩

银河官方网站 13

phper @深圳
个人主页 ·
我的文章 ·
13 ·
 

银河官方网站 14

浏览器兼容性

很不幸,不是所有的浏览器都可以用相同的方式处理加载失败的图片。对于某些浏览器,即使图片没有呈现,伪元素也根本不会显示。

这是我通过自己的测试得出的兼容性结论:

Browser Alt Text :before :after
Chrome (Desktop and Android)
Firefox (Desktop and Android)
Opera (Desktop)
Opera Mini ✓ **
Safari (Desktop and iOS) ✓ *
iOS Webview (Chrome, Firefox, others) ✓ *

* 备选文本只有在图片的宽度足够容纳它的时候才会显示。如果图片没有指定宽度,备选文本根本不会显示
** 字体样式不生效

至于那些不支持伪元素的浏览器,应用的样式会被忽略,所以它们不会产生破坏。这就是说我们仍然可以为那些使用支持伪元素浏览器的用户应用美化样式,提供更加友好的体验。

出自:

相关文章

发表评论

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

网站地图xml地图