CSS的背景图的sprite_html/css_WEB-ITnose-html教學-PHP中文網

CSS的背景图的sprite_html/css_WEB-ITnose

WBOY

發布： 2016-06-21 08:51:58

原創

1516 人瀏覽過

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

我们取这个第二个图标

<html><meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"/><style>.sk_background_1{height: 46px;width: 41px;//background url(xx.jpg) left top;background : url(img/css-sprites-01.gif) 231px -60px ;}</style><div class="sk_img"><div class="sk_background_1">这里有张图片</div></div></html>

登入後複製

关键代码也就是

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

登入後複製

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

<html><meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"/><script></script> <style>.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 ;}</style> <div class="sk_img"><ul><a href="window.history.back(-1);"><li class="sk_img_button1"></li></a><a href="https://www.baidu.com"><li class="sk_img_button2"></li></a><a href="https://www.163.com"><li class="sk_img_button3"></li></a></ul></div></html>

登入後複製

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