0元购京东自营斐讯K2路由器返399元活动
置顶

利用CSS的 :after或:before 伪元素来预先加载多个图像

作者:     目录: 小代码 & 网页设计     发表: 2010年09月23日

为了使网站的一些动态效果更加流畅,通常都需要预先加载一些图片。这里介绍一种利用CSS的 :after或:before 伪元素来预先加载图像的方法,其代码简洁且兼容性好。

利用CSS的 :after或:before 伪元素来预先加载图像的CSS代码如下

body:after{
content: url(renniaofei_com_1.jpg) url(renniaofei_com_2.jpg) url(renniaofei_com_3.jpg);
display: none; }

代码说明:

这里我们使用:after伪元素,因为:after 伪元素会在body元素之后添加内容,符合常规的设计要求,当然特殊情况下也可以使用:before伪元素。

:after 伪元素允许编程人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

上述CSS代码的含义:在body元素之后添加3个图片(renniaofei_com_1.jpg renniaofei_com_2.jpg renniaofei_com_3.jpg
),但将display设置为none,即页面中不显示这3个图片。

兼容性

由于CSS2支持 :after和:before 伪元素,因此所有的主流浏览器都支持:after和:before。

注:IE6和IE7不支持:after和:before伪元素。

标签: .

2 个评论

  1. shekck says:

    效果挺不错的,兼容性也好,我是直接无视IE及其全家的,呵呵

发表评论

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