CSS的背景图的sprite_html/css_WEB-ITnose

示例1。首先我们先看一张多个图片拼接成的合成图，我们要取其中的一个图标

我们取这个第二个图标

.sk_background_1{height: 46px;width: 41px;//background url(xx.jpg) left top;background : url(img/css-sprites-01.gif) 231px -60px ;}
这里有张图片

登录后复制

关键代码也就是

立即学习“前端免费学习笔记（深入）”；

height: 46px;width: 41px;//高度和宽度是显示图片的大小。url后面的2个坐标，第一个是距离浏览器的左边据，第二个是距离浏览器的上边距，如果左边，上边有其他标签。这个坐标就是以最近的标签为0开始计算background : url(img/css-sprites-01.gif) 231px -60px ;

登录后复制

示例2，显示3个按钮，按纽可以点击。

 .sk_img ul li{margin: 0;padding: 0;list-style: none;top: o;}.sk_img_button1{width: 84px;height: 85px;background : url(img/css-sprites-02.jpg) -208px 97px;}.sk_img_button2{width: 84px;height: 85px;background : url(img/css-sprites-02.jpg) 294px -30px;}.sk_img_button3{width: 84px;height: 85px;background : url(img/css-sprites-02.jpg) 205px -31px ;} 

登录后复制

点击按纽则跳转，点击第一个返回上一个页面，点击第二个调转到baidu等。