样式化加载败北的图样,美化加载失利的图片

吹嘘加载败北的图形

2016/05/13 · CSS ·
图片

本文由 伯乐在线 –
王浩
翻译,sunshinebuel
校稿。未经许可,禁止转发!
英文出处:bitsofco.de。欢迎参加亚洲必赢官网 ,翻译组。

加载失利的图形会很难看。

亚洲必赢官网 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>
元素上选拔唯有当图片加载战败候会呈现的体制,正常加载的图纸并不会惨遭震慑。

亚洲必赢官网 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>
标签上应用样式,来提供比默认情形更好的体验。

加载失败的图纸是相比较丑陋的,比如
亚洲必赢官网 3

丰裕有用的信息

拍卖加载败北图片的一种办法,就是给用户提醒新闻来验证图片加载败北了。大家仍然足以采纳attr() 这一语句来突显图片的链接地址。

亚洲必赢官网 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相关属性可以兑现更美的表现。

轮换默许的准备文本

抑或,我们得以行使伪元平昔替换显示出来的默许备选文本,通过在默许文本上方放置一个伪元素的办法,使其在视图中隐藏。

亚洲必赢官网 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达成一个异样的效能:

当图片正常加载时无需处理,而当加载战败时让图片应用有的出奇的体制,以高达更好的用户体验效果。

别的的美化样式

除却浮现自定义新闻(或者说换一种办法),我们还足以行使伪元素给加载败北的图片应用越多的体制。

亚洲必赢官网 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;
}

一经加载成功,图片会正常呈现所有的体制。伪元素也统统不会扭转。

亚洲必赢官网 7

加上有用的音信

处理加载战败图片的一种方法,就是给用户提醒音讯来证实图片加载败北了。大家甚至可以利用
attr() 这一语句来体现图片的链接地址。

亚洲必赢官网 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="休要胡说"/>

亚洲必赢官网 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) ✓ *

*\ 未雨绸缪文本唯有在图纸的升幅丰富容纳它的时候才会来得。如若图片并未点名宽度,备选文本根本不会展现
\* 字体样式不见效*

有关那么些不帮助伪元素的浏览器,应用的体制会被忽视,所以它们不会发生破坏。那就是说我们仍可以为那几个使用援救伪元素浏览器的用户使用美化样式,提供越来越和谐的感受。

打赏帮忙自己翻译更加多好小说,谢谢!

打赏译者

轮换默许的准备文本

依旧,我们可以接纳伪元从来替换展现出来的默许备选文本,通过在默许文本上方放置一个伪元素的主意,使其在视图中隐藏。

亚洲必赢官网 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%;

  height: 100%;

 

}

   

 

添加CSS样式

假诺图片加载失利,大家须要向用户提供有关文案,那就用到了CSS的attr函数

亚洲必赢官网 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;
        }

打赏协理我翻译越来越多好文章,谢谢!

任选一种支付办法

亚洲必赢官网 12
亚洲必赢官网 13

2 赞 3 收藏
评论

其余的美化样式

除了显示自定义新闻(或者说换一种办法),大家还足以应用伪元素给加载败北的图片应用越来越多的体制。

亚洲必赢官网 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;}

   

一旦加载成功,图片会正常展现所有的体制。伪元素也截然不会扭转。

亚洲必赢官网 15

替换alt文本

为了让加载失利的图片突显越发美丽,选用伪元一直拓展相对定位,更随心所欲的操纵表现。

亚洲必赢官网 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;
        }

关于作者:王浩

亚洲必赢官网 17

phper @深圳
个人主页 ·
我的小说 ·
13 ·
 

亚洲必赢官网 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) ✓ *

* 备选文本唯有在图片的增进率丰裕容纳它的时候才会体现。如若图片并未点名宽度,备选文本根本不会显得
** 字体样式不奏效

有关那一个不帮助伪元素的浏览器,应用的体制会被忽略,所以它们不会生出破坏。那就是说大家如故可以为这几个运用协助伪元素浏览器的用户使用美化样式,提供进一步协调的体验。

出自:

添加额外的体制

采用伪元素可以加上越多的附加样式:
亚洲必赢官网 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元素上的伪元素。那是自身收拾的包容性表格:
亚洲必赢官网 20

*
alt文本自由在图片的宽度丰富容纳下它时才会体现,若是图片并未大幅度,alt文本压根不会展现

** 字体样式不会起效果

译者注:
事实上,针对IMG元素设置伪元素是可怜好的一种backup方案,就算针对某些不帮衬该特性的浏览器而言也是未曾副功用。因而在平时针对IMG元素使用base64占位符的落到实处下,尝试此外一种风格的完毕也未尝不可。那样不但裁减了广大代码量,而且保障了全站图片加载败北所表现的一致性。

打赏扶助自己写出越来越多好小说,谢谢!

打赏小编

打赏匡助自己写出更多好小说,谢谢!

亚洲必赢官网 21

1 赞 3 收藏
评论

关于作者:欲休

亚洲必赢官网 22

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

网站地图xml地图