|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
破洛洛文章简介:伪元素与图片交换。
WeBrebuild年会上分享的一点内容,常识点的内容就不作过量论述了,假如你完整不懂得伪元素那末倡议先看一下官方伪元素选择器的材料,大概自行谷歌懂得,有乐趣能够往看下这篇文章:利用伪元素完成CSS图片交换(NIR),关于图片交换有对照具体的先容和追溯。
先看一下通用的图片交换办法:Demo1
甚么成绩呢,笔墨被埋没了,间接招致的了局就是当图片加载失利大概网速慢图片没法很快加载的时分,用户不晓得这块地区的内容是甚么,有甚么功效。
为了不呈现如许的情况,笔墨就不克不及被埋没,图片也不克不及间接界说成元素的背景图片,而必要别的一个标签来包括图片进而掩盖笔墨。
在IE67和低版本的chrome、FF等扫瞄器里的确是如许,但在对伪元素选择器完善撑持的扫瞄器下,我们只必要让伪元从来完成这个事情。
利用伪元从来完成图片交换有两种办法:
1、使用content将图片间接放到伪元素选择器里,看Demo2
2、相对定位伪元素,将图片界说成背景Demo3
两种办法的利害对照:
最初做了个针对IE67利用笔墨埋没,IE8和初级扫瞄器利用伪元素的渐进加强伪元素图片交换Demo
假如你的项目中有对IE别的誊写CSS文件能够把CSS分别开来,这里我间接利用hack完成了这个事情。
实践项目中仍是按照情形选择最优的办法来处置,关于对照主要的内容能够接纳增加空标签的办法,如许即便在低版本IE中图片加载呈现成绩了也能包管内容。
有乐趣也能够看下图片援用毛病的Demo:Demo-noimages
相干参考链接:
http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/demo
http://www.mezzoblue.com/tests/revised-image-replacement/
Pseudo-ElementsSelectors伪元素选择符
</p>
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。 |
|