网页图片素材整合一张图片后续篇-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">

<head>

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

</head>

#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>

</body>

</html>

用到的图片呢，下图：

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背景图片整合到一张图片