未经作者许可,两个冒号一个冒号都可以 css3中伪

作者: 前端  发布:2019-11-07

美化加载失败的图片

2016/05/13 · CSS · 图片

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

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

9159.com 1

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

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

本文作者: 伯乐在线 - 欲休 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

什么是伪元素

它创建了一个虚假的元素,并插入到目标元素内容之前或之后
语法 ::after /::before
两个冒号一个冒号都可以 css3中伪类是一个冒号,为了区分才给加的两个冒号
伪元素的content: "";属性不能省略 否则伪元素就会无效
伪元素默认是行级元素
伪元素不会出现在html文件中 他是css3的一个属性
伪元素的不可用的 不能用来生成内容 这是网页可用性和可访问性的关键
伪元素不属于文档,所以js无法操作它
伪元素属于主元素的一部分,因此点击伪元素触发的是主元素的click事件
插入文本 content: "我";
插入非文本元素content: div;
a::after{
content:"" ;
一些关于你想要的元素的相关属性
}

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

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

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

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

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

9159.com 2

本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动,望读者见谅

一些应用场景:

1.清除浮动
2.利用attr()来获取图片alt属性值作为伪元素:after的content内容来替换img的内容,并运用适当的样式从而完成:图片加载成功时显示正常的图片,加载失败时显示图片破裂效果的样式

img{
min-height: 50px;
position: relative;
}
img:before: {
content: " ";
display: block;
position: absolute;
top: -10px;
left: 0;
height: calc(100% + 10px);
width: 100%;
backgound-color: rgb(230, 230,230);
border: 2px dotted rgb(200,200,200);
border-radius: 5px;
}
img: {
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;
}

3.与counter()结合实现序号问题

4.特效使用利用这两个伪元素,可以实现各种效果,如放大镜、叉叉、箭头、三角符等

5.利用:before和:after能轻易实现美化的radio和checkbox

上手练习

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

XHTML

<img src="" alt="Kanye Laughing">

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

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

加载失败的图片是比较丑陋的,比如
9159.com 3

添加有用的信息

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

9159.com 4

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> 元素上应用只有当图片加载失败候会显示的样式,正常加载的图片并不会受到影响。

但是我们可以让结果变得更美好。通过给元素设置CSS相关属性可以实现更美的呈现。

替换默认的备选文本

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

9159.com 5

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

 

IMG元素你需要知道的两点知识

  1. 我们可以针对IMG元素设置排版相关的CSS样式(诸如font等属性)。一旦IMG的可替换文本(即alt属性)出现,则设置的CSS样式应用于这些文本;
  2. IMG元素属于可替换元素(可替换元素是指元素的外观和大小受外部源所影响,常见的可替换元素如IMG,OBJECT,INPUT,TEXTAREA等)。正由于可替换元素收外部源的影响,因此CSS中的伪元素::before、::after对它不起作用。但是,一旦图片加载失败,伪元素就可作用于图片之上

理解了上述两点,我们就可以用CSS实现一个特殊的功能:

当图片正常加载时无需处理,而当加载失败时让图片应用一些特殊的样式,以达到更好的用户体验效果。

其他的美化样式

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

9159.com 6

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

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

9159.com 7

添加有用的信息

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

9159.com 8

 

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;

}

   

 

实践

采用如下的实例代码:

<img src="" alt="休要胡说"/>

1
  <img src="http://nopic.jpg" alt="休要胡说"/>

9159.com 9

浏览器兼容性

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

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

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) ✓ *

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

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

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

打赏译者

替换默认的备选文本

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

9159.com 10

 

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

9159.com,  height: 100%;

 

}

   

 

添加CSS样式

一旦图片加载失败,我们需要向用户提供相关文案,这就用到了CSS的attr函数

9159.com 11

示例代码:

img { font-family: 'STKaiti'; font-weight: 300; line-height: 2; text-align: center; width: 100%; height: auto; display: block; position: relative; } img:before { content: "抱歉,图片加载失败 :("; 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: 'STKaiti';
            font-weight: 300;
            line-height: 2;
            text-align: center;
 
            width: 100%;
            height: auto;
            display: block;
            position: relative;
        }
 
        img:before {
            content: "抱歉,图片加载失败 :(";
            display: block;
            margin-bottom: 10px;
        }
 
        img:after {
            content: "(url: " attr(src) ")";
            display: block;
            font-size: 12px;
        }

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

任选一种支付方式

9159.com 12 9159.com 13

2 赞 3 收藏 评论

其他的美化样式

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

9159.com 14

 

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

   

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

9159.com 15

替换alt文本

为了让加载失败的图片呈现更为美观,采用伪元素来进行绝对定位,更自由的控制表现。

9159.com 16

img { /* Same as first example */ } img:after { content: "f1c5" " " attr(alt); font-size: 16px; font-family: FontAwesome; color: rgb(100, 100, 100); display: flex; justify-content: center; align-items: center; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-color: #ddd; }

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: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ddd;
        }

关于作者:王浩

9159.com 17

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

9159.com 18

浏览器兼容性

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

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

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) ✓ *

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

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

出自:

添加额外的样式

利用伪元素可以添加更多的额外样式:
9159.com 19

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

正如第二节所说,如果图片正常加载,那么伪元素中设置的所有样式都不会被作用,因此这种方式作为一种backup,是非常有效的。

兼容性

不幸的是不是所有的浏览器都会这样处理应用在IMG元素上的伪元素。这是我整理的兼容性表格:
9159.com 20

* alt文本自由在图片的宽度足够容纳下它时才会显示,如果图片没有宽度,alt文本压根不会显示

** 字体样式不会起作用

译者注:
其实,针对IMG元素设置伪元素是非常好的一种backup方案,即使针对某些不支持该特性的浏览器而言也是没有副作用。因此在通常针对IMG元素使用base64占位符的实现下,尝试另外一种风格的实现也未尝不可。这样不仅仅减少了许多代码量,而且保证了全站图片加载失败所呈现的一致性。

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

9159.com 21

1 赞 3 收藏 评论

关于作者:欲休

9159.com 22

前端自由人 个人主页 · 我的文章 · 1 ·  

本文由9159.com发布于前端,转载请注明出处:未经作者许可,两个冒号一个冒号都可以 css3中伪

关键词:

上一篇:但是你真的了解z-index吗,原文出处
下一篇:没有了