样式化加载失败的图片,美化加载战败的图纸

美化加载战败的图样

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地图