简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

CSS的背景图的sprite_html/css_WEB-ITnose

WBOY
发布： 2016-06-21 08:51:58
原创
1565 人浏览过

示例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等。

相关标签：
CSS的背景图的sprite
来源：php.cn
上一篇：车易拍某站Getshell_html/css_WEB-ITnose 下一篇：CSS选择器的优先级_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
1335
动态修改Javafx中的内联CSS样式 我试图在应用程序最大化时更改窗格的背景图像。我的背景是使用内嵌css设置的。我为样式设置了两个不同的变量和一个if语句。但是，我没有运气让它改变样式。StringcssStyle=...
来自于 2024-04-06 20:57:16
0
1
487
仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}
来自于 2024-04-06 19:25:49
0
1
505
CSS 样式未应用于网站 我正在使用Bootstrap5制作网站，但index.css属性未应用于index.html。当我将鼠标悬停在服务卡上时，背景应该会发生变化，从而产生过渡效果。应该是从这个到这个。...
来自于 2024-04-06 17:12:23
0
1
336
显示隐藏的侧面板：选中 我希望在侧面板中有一个导航菜单，可以通过动画汉堡菜单切换到视图。我想仅使用CSS创建它，而不使用任何JS。:checked伪类似乎是可行的方法，但我无法让它工作。到目前为止我拥有的...
来自于 2024-04-06 15:49:33
0
1
319
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！