CSS Sprites ——雪碧图的使用方法
首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每个图片的坐标,这样不但减少http请求,而且还降低了图片的大小,加快图片的加载速度,对前端开发的朋友来说是必备技能。更详细的解释请到【百度百科】围观。
雪碧图使用场景
1.静态图片,不随用户信息的变化而变化
2.小图片,图片容量比较小
3.加载量比较大
注:一些大图片、有动态效果图片无需使用雪碧图
雪碧图使用原理
1.使用CSS里面的background-position属性来控制背景图的位置,从而在不同处显示所需要的图标。
2.
(上图是慕课网教学视频上的一张图片,在此借用一下)如图所示,将背景图放在一个坐标系里面,以左上角为起点。拼合背景图的小图(X,Y)为负值,比如想要展示图中黑色边框里面的裙子时,只需:裙子:{background-position:-100px,0;}即可。因为“裙子”只有X轴偏移,没有Y轴偏移。
雪碧图实现方法
1.第一步:完成背景图的拼合(把你所需要展示的小图片整合到一张图上面)
Photoshop手动拼图:在PS里完成所需的背景图,量取每个小图片的尺寸并记录下来,将背景图保存为png格式。
当项目或网站比较大时,用PS逐个量取可能不太现实。这时可以使用Sprites工具自动生成小图片的坐标点。推荐一种Sprites工具自动生成工具——CSSGaga,是Windows系统下自动生成雪碧图的一种工 具,具体使用还请看官网上自寻。下载地址:http://www.99css.com/archives/1524
2.下面是本人做的一个雪碧图例子的代码,看官可以复制去看下效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图</title>
</head>
<style>
h3,ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
li h3 {
font-size: 14px;
font-weight: 400px;
}
li {
display: block;
height: 40px;
line-height: 35px;
overflow: hidden;
/*border: 0.5px solid #dedede;*/
}
.LOGO {
width:160px;
background: #f8f8f8;
}
li i {
background: url(sprite.png);
display: inline;
width: 45px;
height: 35px;
float: left;
margin: 3px 10px 0 0;
}
.logo-1 i{
background-position: 0 0;
}
.logo-2 i{
background-position: 0 -35px;
}
.logo-3 i{
background-position: 0 -73px;
}
.logo-4 i{
background-position: -60px 3px;
}
.logo-5 i{
background-position: -60px -35px;
}
.logo-6 i{
background-position: -60px -108px;
}
.logo-7 i{
background-position: -60px -145px;
}
.logo-8 i{
background-position: -60px -185px;
}
</style>
<body>
<div class="LOGO">
<ul>
<li class="logo-1">
<i></i>
<h3>服装内衣</h3>
</li>
<li class="logo-2">
<i></i>
<h3>鞋包配饰</h3>
</li>
<li class="logo-3">
<i></i>
<h3>运动户外</h3>
</li>
<li class="logo-4">
<i></i>
<h3>居家饰品</h3>
</li>
<li class="logo-5">
<i></i>
<h3>居家家具</h3>
</li>
<li class="logo-6">
<i></i>
<h3>爱上喝水</h3>
</li>
<li class="logo-7">
<i></i>
<h3>私家车</h3>
</li>
<li class="logo-8">
<i></i>
<h3>乐器类</h3>
</li>
</ul>
</div>
</body>
</html>
3.所用图片
看官需要将改图转化为png格式。(background-position属性的数值可以根据需求自行调整)
该文章为个人编写,如有错误之处,还请看官谅解!
CSS Sprites ——雪碧图的使用方法的更多相关文章
- CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- CSS Sprite 雪碧图制作
CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...
- CSS Sprite雪碧图
为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...
- CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- css背景雪碧图等
1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...
- css sprite 雪碧图
使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...
- 【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
随机推荐
- 微信公众号手机无法直接下载APK文件是怎么回事
现在微信分享的功能很多,从分享的链接下载apk安卓包是很正常的,但是微信不让下载apk包,只能通过浏览器来下载,但是这要给用户一个提示吧,不然用户不知道 下面我们来实现,引导用户通过浏览器来下载apk ...
- js的回调函数
介绍首先从英文介绍开始 A callback is a function that is passed as an argument to another function and is execut ...
- JQuery 方法合集(懒人备记)
原创文章,转载请私信.谢谢~ PS:请将jquery的引用文件放在head的标签内 语法:$(selector).action() $(document).ready(function(){ // 开 ...
- 什么样的类才算是一种可重用的组件,即JavaBean?
每一个类实现了Bean的规范才可以由Spring来接管,那么Bean的规范是什么呢? 必须是个公有(public)类 有无参构造函数 用公共方法暴露内部成员属性(getter,setter) 实现这样 ...
- python修炼第五天
第五天,感觉开始烧脑了.递归逻辑难,模块数量多,但是绝世武功都是十年磨一剑出来的!稳住! 1 递归. 定义-----递归就是在函数的内部调用自己递归深度 998不建议修改递归深度,因为如果998都没有 ...
- 【转载】Excel 三维地图入门
三维地图入门(office 2016) https://support.office.com/zh-cn/article/%E4%B8%89%E7%BB%B4%E5%9C%B0%E5%9B%BE%E5 ...
- swiper使用中一些点的总结
最近做了PC端改版,要求移动端有更好的体验,一些产品滚屏的展示,就用了swiper插件,以方便用户在移动端访问可以滑动翻屏展示. 本次项目中使用的是swiper2.0版本. 首先要引入swiper的j ...
- 活代码LINQ——09
一.代码 ' Fig. 9.7: LINQWithListCollection.vb ' LINQ to Objects using a List(Of String). Module LINQWit ...
- 入门html第一次copy小米首页布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- flv文件解析(纯c解析代码)
参考链接: 1. FLV科普12 FLV脚本数据解析-Metadata Tag解析 https://blog.csdn.net/cabbage2008/article/details/50500021 ...