【css-sprite 雪碧图的使用,合并多张小图,背景图片当按钮的设置】的更多相关文章

css-sprite 雪碧图的使用,合并多张小图,背景图片当按钮的设置

背景图片基础: 使用background-image来设置背景图片 语法: background-image:url(相对与css的路径) 如果背景图片大于元素,默认会显示图片的左上角 如果背景图片和元素一样大,则会将背景图片全部显示 如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素 可以同时为一个元素指定背景颜色和背景图片 这样背景颜色将会作为背景图片的底色 般情况下设置背景图片时都会同时指定一个背景颜色(因为加载外部图片需要一定的时间.再图片加载出来之前.会先显示颜色) 背景图片默…

CSS Sprite 雪碧图制作

CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的.…

CSS Sprite雪碧图

为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w…

CSS Sprite雪碧图的应用

CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 静态图片,不随用户信息的变化而变化. 小图片,容量比较小(2~3k). 图片加载量比较大. 目的 减少Http请求数量,加速内容显示.因为每请求一次,就会和服务器建立一次链接,而建立链接是需要额外的时间的. 使用 使用雪碧图之前,我们需要知道雪碧图中各个图标的位置. 从上面的图片不难看出雪碧图中各个…

【HTML+CSS】(2)CSS Sprite雪碧图

1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. 使用雪碧图能够降低http请求数量,加速内容显示.每请求一次,就会和server链接一次,建立链接时须要额外时间的. 3. 实现原理 使用background-position属性: 须要使用雪碧图的时候,设置x和y的值就能够了. 4. 实现方式: 一种方式是使用PS手动拼图: 还有一种方式是使用…

CSS Sprite雪碧图应用

在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更优的解决方案是:雪碧图sprite. 所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片,然后通过元素的background-image.background-positon属性完成图片的定位. 为此,我做了个Demo. 在学习的过程中,遇到了背景图片定位的问题,也就是b…

css sprite 雪碧图

使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导致访问速度变慢.这时候,把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题. 显示雪碧图的条件: 1)需要一个设置好宽和高的容器 2)需要设置background-position的值(默认为(0,0),也就是图片的左上角),即移动图片到自己想要的图标位置.…

Css Sprite(雪碧图、精灵图)<图像拼合技术>

一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变.维护起来更加方便. 三.实现原理 css background-position 控制一个层可显示的区域范围大小,通过一个窗口进行背景图的滑动实例: 代码如下…

CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position"来实现背景图片的定位技术. 二.图片整合的优势: 1)通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度. 2)通过整合图片来减小图片的体积.   2.CSS Sprites的实现方法 3.图片整合原则 1)边切图边整合. 2)定位时避免使用bottom,right等,用具体的数值,…

compass框架的sprite雪碧图的用法简要

---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样做的好处是:减少了网站的HTTP请求次数 **compass如何合并雪碧图** 1. 把需要合并的图片(1.png,2.png,3.png…)放在images文件下的新建一个文件夹test 2. 在SCSS文件中 用 @import 指向这些上述图片们,然后compass会自动将这些图片们合并成一个…