【澳门葡京】鼓吹加载失利的图样,样式化加载败北的图片

吹嘘加载失利的图样

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 ·
 

相关文章

发表评论

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

*
*
Website