概述

css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就
是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，
“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置

1、精灵图的原理

将页面中的背景图合并成一张图片
利用背景属性，使不同元素显示图片的不同部分

实现步骤：

1.测量图片大小

2.通过引入背景图片，用背景定位实现

2、css sprites的优缺点

优点：

1.减少网页的http请求，提高页面的性能

2.减少在图片上的命名困扰

3.更换网页风格方便

缺点：

1.必须要限定容器的大小

2.背景图位置需要计算

3、适用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

二、滑动门

概述：

css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容

实例预览

微信，是一个生活方式

实现要点

滑动门核心技术就是利用背景属性（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

滑动门实现：a  spana用来撑开左边的小括号span用来撑开右边的小括号给a设置padding-left: 让文字距离左边有点距离，美观给span设置padding-right 让文字距离右边有点距离，美观实际文字写在span里面，span的宽度由文字和内边距撑开a的宽度是由span撑开了

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}a {text-decoration: none;color: #fff;}.wrap {height: 74px;background: url(../img/css滑动.jpg) repeat-x;}.wrap ul {height: 74px;line-height: 74px;padding-left: 200px;box-sizing: border-box;}.wrap ul li {float: left;margin-right: 20px;}/* a用来撑开左边的小括号 */.wrap ul li a {height: 33px;line-height: 33px;display: inline-block;background: url(../img/hua.png) no-repeat 0% 0%;padding-left: 15px;}/* span用来撑开右边的小括号 */.wrap ul li span {height: 33px;line-height: 33px;display: inline-block;background: url(../img/hua.png) no-repeat 100% 100%;padding-right: 15px;}.wrap ul li:hover a {/* background: url(../img/hua.png) no-repeat 0% 0%; */}.wrap ul li:hover span {/* background: url(../img/hua.png) no-repeat 100% 100%; */}</style>
</head><body><div class="wrap"><ul><!-- 实际文字写在span里面，span的宽度由文字和内边距撑开a的宽度是由span撑开了 --><li><!-- a用来撑开左边的小括号 --><a href="#"><!--    span用来撑开右边的小括号 --><span>首页</span></a></li><li><a href="#"><span>帮助与反馈</span></a></li><li><a href="#"><span>公众与平台</span></a></li><li><a href="#"><span>开发平台</span></a></li><li><a href="#"><span>微信支付</span></a></li></ul></div></body></html>

CSS 精灵（雪碧图、精灵图）、滑动门相关推荐

CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
猿人学题库十九题——css加密-雪碧图/数据干扰等——地毯式采坑学习
猿人学题库十四题--css加密-雪碧图/数据干扰等 1. 首先进入浏览器的开发者工具, 打开就是俩个无线debugg,正常的操作过掉 1. 找到 debugg 对应的行数,右击选择 neve ...
JAVA自动生成雪碧图sprites和样式CSS文件（包含原始图标CSS、雪碧图CSS）
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
雪碧图PHP,Css Sprite(雪碧图、精灵图) - SegmentFault 思否
一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...
HTML+CSS(精灵图)实现微信滑动门技术
微信滑动门技术为了使各种[特殊形状的背景]能够[自适应元素中文本内容的多少],出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强 ...
17-CSS3 高级技巧精灵图字体图标滑动门
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...

CSS 精灵（雪碧图、精灵图）、滑动门

概述