网页图片素材整合一张图片后续篇-CSS Sprites

作者:Davidszhou   来源:Davidszhou博客   时间:2014-07-12 20:24:51   点击:

 前几篇有篇文章《为什么把网页图片素材放在一张图片上 有助于网页提速》里面提到一篇文章关于把所有素材放在一张图片上(今天才晓得这是叫CSS Sprites技术) 通过background的XY轴定位 可能写有点错误,这里又在写了一点 怎么更好理解X轴和Y轴取值问题,这里借助实例看下效果:

先贴出具体用到的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Davidszhou-www.zongk.com</title>

</head>

<style type="text/css">

#a { width:200px; height:100px; margin:auto;}

#a1,#a2 { width:100px; height:200px; float:left;}

#a1 { background:url(images/bg2.jpg) no-repeat 0px 0px;}

#a2 { background:url(images/bg2.jpg) no-repeat -50px 0px;}

</style>

<body>

<p id="a">

<p id="a1"></p>

<p id="a2"></p>

</p>

</body>

</html>

用到的图片呢,下图:

 CSS Sprites背景图片整合到一张图片 -CSS Sprites背景图片整合到一张图片

两种颜色一张是上下结构一张是左右结构的素材为了更好区别看到不同值做到效果(图片尺寸都是:200*200,两个颜色区域为:200*100(上下结构)与100*200(左右结构))。

其实是用一张图片素材就可以理解了,只是为了体验不同结构的素材调用X轴与Y轴数据如何写。这里演示一种就是左右结构的素材。代码中是两个并列的p宽高比都是100*200。层的宽度都是100px,左右结构的素材宽度也是100px,那左边部分黑色也就可以说是直接可以展现出来而右边的青色也就自然“隐藏起来”所以X轴Y轴可以直接写0px,当然也可以不写,主要是右边的,我想调用青色出来,那我们可以这样想一下,如果我写成正值是这张图片距离Y轴就是这个值得距离,如果我设置负值,图片就会在反方向距离这值得距离。看下具体效果:

将#a2 { background:url(images/bg2.jpg) no-repeat 50px 0px;}X轴值给的正值50,那图片沿着X轴移动距离Y轴50px,看下效果:

 CSS Sprites背景图片整合到一张图片

设置-50px是什么效果呢?沿着X轴移动距离Y轴反向50PX,可以看到黑色青色各一半,如图:

 CSS Sprites背景图片整合

这样也就可以猜想了,如果在y轴方向也给类似值也会有这样的效果,我们来看下:

#a2 { background:url(images/bg2.jpg) no-repeat -50px 50px;}

猜想层a2背景素材会沿着Y轴距离X轴距离顶端50px,层高度是200px,如图:

 CSS Sprites背景图片整合到一张图片

#a2 { background:url(images/bg2.jpg) no-repeat -50px -50px;}这里Y轴给的负值,那素材应该沿着Y轴反方向距离X轴50px,如图低端往上抬了50px:

 CSS Sprites背景图片整合到一张图片

 

上篇文章讲的可能有点错误点,上次一个朋友问了这一点就仔细看了一下这个知识点, 觉得上篇文章有点错误。

TAGS:CSS Sprites ,  , 网页提速 , 网页质量 , 网页素材

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/12.html转载请标注此链接

网站统计
文章总数:129
今天发布:0
软件资源数:18