教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 337 CSS
css精灵图怎么使用
来源：互联网
2023-03-16 19:10:40 327
在网站开发我们常会用CSS精灵图技术，那么什么CSS精灵图呢？简单来说就是把多张图片和成一张图片来减少网页http请求，提高了页面加载速度，优化网站性能！那么如何使用呢？接着往下看↓（注：例子的代码是为了方便演示，代码可以根据自己的需求来更改）
工具/原料
- 电脑
- 网站开发编辑器
效果展示
CSS精灵图效果展示（列表图标只需插入一张背景图片）
方法/步骤
准备好一张精灵图（可以通过PS将所以图片整合到一起）
打开网站开发工具新建一个HTML文档
编辑HTML标签代码：
核心代码：
ul class="sprites">
li>span class="icon1">/span>a href="#">我是一个文档/a>/li>
li>span class="icon2">/span>a href="#">学会了你真棒/a>/li>
li>span class="icon3">/span>a href="#">网站开发很简单/a>/li>
li>span class="icon4">/span>a href="#">爱生活爱编程/a>/li>
li>span class="icon5">/span>a href="#">哈哈我学会了/a>/li>
/ul>
给标签编写合适的CSS代码：
核心代码：
style type="text/css">
body{ padding: 5%;}
*{padding: 0; margin: 0;}
.sprites li{ width: 100%; height: 40px; line-height: 40px; list-style: none;}
.sprites li span{
display: inline-block;
width:17px;height:17px;
background:url(ico.png) no-repeat;
}
/style>
编写CSS精灵图片代码
核心代码：
.sprites li span.icon1{ background-position: -62px -36px}
.sprites li span.icon2{ background-position: -86px -36px}
.sprites li span.icon3{ background-position: -110px -36px}
.sprites li span.icon4{ background-position: -133px -36px}
.sprites li span.icon5{ background-position: -158px -36px}
打开浏览器查看效果
完整代码：
html>
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta http-equiv="X-UA-Compatible" content="ie=edge">
title>css精灵图怎么使用/title>
style type="text/css">
body{ padding: 5%;}
*{padding: 0; margin: 0;}
.sprites li{ width: 100%; height: 40px; line-height: 40px; list-style: none;}
.sprites li span{
display: inline-block;
width:17px;height:17px;
vertical-align: middle;
background:url(ico.png) no-repeat;
}
.sprites li span.icon1{ background-position: -62px -36px}
.sprites li span.icon2{ background-position: -86px -36px}
.sprites li span.icon3{ background-position: -110px -36px}
.sprites li span.icon4{ background-position: -133px -36px}
.sprites li span.icon5{ background-position: -158px -36px}
/style>
/head>
body>
ul>
li>span>/span>a href="#">我是一个文档/a>/li>
li>span>/span>a href="#">学会了你真棒/a>/li>
li>span>/span>a href="#">网站开发很简单/a>/li>
li>span>/span>a href="#">爱生活爱编程/a>/li>
li>span>/span>a href="#">哈哈我学会了/a>/li>
/ul>
/body>
/html>
注意事项
- 例子的代码是为了方便演示，代码可以根据自己的需求来更改
- 核心代码：background-position 背景定位属性
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
上一篇：如何在CSS中进行居中 下一篇：怎么让弹出的div不被后面弹出的div遮挡住
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 479 CSS
-
css基础教程：[1]为网页使用网络字体详细阅读
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 327 CSS