Maison > interface Web > tutoriel HTML > CSS的背景图的sprite_html/css_WEB-ITnose

CSS的背景图的sprite_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 08:51:58
original
1611 Les gens l'ont consulté

示例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>
Copier après la connexion

关键代码也就是

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


示例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>
Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal