何为精灵图片CSS Sprites
CSS Sprites其实就是把网页中一些背du景图片整合到一张图片文件中,再利用CSS的daobackground-image
,background- repeat
,background-position
的组合进行背景定位,background-position
可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销。
如下的图就是精灵图片:
我们只需要移动 背景图片的在盒子中位置
来使用,配合ps
使用来测量位置最舒服了。
使用
值得注意的是,如果我想右移背景图片,那么background-position: x y;
x坐标要是负数 同理 下移动背景 y坐标也得是负数。
例如效果
<style>
.box1 {
width: 60px;
height: 60px;
border: 1px solid black;
margin: 100px auto;
background: url(./img/sprites.png) no-repeat scroll -182px 0px;
}
</style>
<body>
<div class="box1"></div>
</body>
结语
放假的第八天