css（CSS Sprites精灵图）
时间：2023-07-22 20:36:02 | 来源：网站运营
时间：2023-07-22 20:36:02 来源：网站运营
css（CSS Sprites精灵图）：
什么是CSS Sprites
CSS Sprites通常被称为css精灵图， 在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。 就是将导航的背景图，按钮的背景图等有规则的合并成一张背景图，即多张图合 并为一张整图， 然后再利用background-position进行背景图定位的一种技术
为什么需要css sprites
CSS Sprites 并不是一门新的技术了，目前他发展的已经比较成熟，阿里巴巴、百度、谷歌 等各公司的网页中到处都可以发现CSS Sprites 的影子。
他是网页里常见的一种图片应用处理方式，他允许你将一个页面里所涉及到的所=有的零星 的图片都整合到一张大图中去，这样一来，当访问这个页面时，所加载的图片就不会像以前那样 一张一张的慢慢显示出来了，对于当前的网络所流行的速度来说，不超出200kb的单张图片所需 要的加载时间基本是差不多的，节省加载速度的关键不是降低重量，而是减少个数，就因为计算 机都是按照byte计算。页面每显示一张图片都会向服务器发送一次请求。所以，图片越多，所请 求的次数就越多。
为了减少HTTP的请求次数，很多网站的导航背景图、登录框、按钮背景图等使用的并不是 <img>标签，而是CSS Sprite
css sprites的优势
优势：通过整合图片，减少对服务器的请求数量，减少图片的体积从而减轻服务 器的负担，提高网页的加载速度
CSS Sprites实现方法
其中小图之间的排版是有些点规律的，比如说淘宝这张 用到的css属性是background-image、 background-position、background-repeat、这几个属性
首先这些素材图标都是用ps放在同一张图片上， 然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;
滑动门技术
通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果与CSS布局的高效扩展性。
什么是滑动门 ，它是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果。
实现原理： 滑动门技术主要用于制作宽或高度自适的效果中，它本身就利用了滑动窗户的原理，两扇窗户完 全展开那么宽度就宽，如果两扇重叠的话那么就窄，利用这个原理我们就可以通过两张背景图做 为两扇窗户，通过背景图片的重叠展开过程实现宽或高的自适应效果
清除浮动
clear:left/right/both;left 清除左浮动right 清除右浮动both 清除两边浮动
在线咨询
