雪碧图技术

一、boder在某些情况下会触发BFC环境,一般用轮廓(outline)而不用边框
二、雪碧图技术(精灵图)
是一种CSS图像合并技术:(循环);是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
优点:1)减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标,方便在任何位置使用,这样不同位置的请求只需要调用一个图片,从而减少对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量。
2)提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时,单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
3)减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片,所以,如果使用多张图片,鼠标滑过会出现闪白的现象。使用CSS雪碧,由于一张图片即可,所以不会出现这种现象。

不足:1)CSS雪碧的最大问题是内存使用
2)拼图维护比较麻烦
3)使CSS的编写变得困难
4)CSS 雪碧调用的图片不能被打印

三、解决兼容性
1)reset重置技术;normalize技术
2)加前缀
3)<!doctype>解析模式
4)CSS中的Hack技术
5)条件注释
6)倒入包

四、浏览器兼容性
1)opacity(filter)
2)PNG背景
3)圆角(倒包,图片)
4)BFC
5)双倍margin兼容问题
6)在IE下有3PXz差距
7)font-size;

五、条件注释一定要写完整

时间: 2024-07-29 13:46:11

雪碧图技术的相关文章

图片替换技术、雪碧图技术、图片透明技术、常用的电商布局方式

###雪碧图技术### !DOCTYPE html>     <html lang="en">     <head>     <meta charset="UTF-8">     <title>sprite雪碧图技术</title>         <style type="text/css">             div{                 widt

雪碧图

雪碧图技术(精灵图) 多个图合并后,根据位置出现特定的一张图片,只需加载一次,速度快. 前提:组合的每张图宽和高都要一致.出现图片的位置为循环式 代码:<style type="text/css"> div{ width: 150px; height: 120px; outline: 1px solid red; background-image: url("../images/sprites2.png"); background-position: 0

微信小程序之雪碧图(css script)

今天有朋友问我关于微信小程序中如何在不占用大量网络带宽的情况下快速加载图片,我给他推荐了两种方式 1.雪碧图(css script),有过前端经验的朋友应该都有接触过. 2.懒加载. 由于时间关系我就先为大家介绍第一种雪碧图加载,其实雪碧图加载就是将多张大小尺寸基本相同类型的图片 拼凑在一起形成一张新的图片,在页面中不会一个图片就向网络发送一次请求,这样会使得图片加载缓慢,影响 用户体验感.这里的雪碧图是由CssGaga拖拽生成的,这个软件的使用就不为大家介绍了,网上很多下载地址. 操作很简单.

CSS3技术-雪碧图自适应缩放

花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显,在缩放的屏幕上人物还是按照原尺寸大小显示 后来临时留了一节预备的方案:CSS3的scale处理直接可以让元素缩放 通过一个缩放的算放控制scale从而让雪碧图的元素可以缩放,目测还是不错. 但是这会带一系列的计算问题,因为通过sacle缩放后的元素,在浏览器布局中还是按照原尺寸计算的,所以这样的方案

精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术

精灵图 精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术 原理:将多张单一的图片整合到一张图上,以背景引入,并使用background-position调整背景位置,使之显示不同图片 目的:降低浏览器向服务器的请求次数,提高网页加载速度 优点:降低请求次数,多张图整合成一张降低整体大小,整改一张图使得整体风格主题改变,提高维护性 缺点:自适应布局难控制,制作繁琐,不合理的整合图片会导致调用混乱,一张图更改导致整体变化(牵一发动全身) <div class="s

雪碧图(图片拼合技术)

雪碧图 (sprite)是一种图片拼合技术: 使用方法: 1.定视口 width: xx px; height: xx px; 2.插图 background-image: url("图片路径"); 3.移动位置 background-position: x轴坐标 y轴坐标: 优点:将小图标拼合到一张图片里,占用内存少,对开发人员来说就不用麻烦给每个小图标命名,还可以有效地加快网页的加载速度,可以有效增强用户体验: 缺点:需要利用相关图片查看软件找到每个小图标的准确坐标,相对来说比较繁

compass与css sprite(雪碧图)

什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链接:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites 优点:1.减少页面请求数 2.降低图片占用字节 缺点:1.拼图麻烦 2.后期维护麻烦 为什么使用compass? 最近项目中需要使用到很多小图片,想用

css 雪碧图 及jquery定位代码

无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(sprite) 也叫雪碧图. CSS知识点: background-image backgorund-position 特点: 相对于当个小图标,它节省文件体积和服务请求次数.将所有零碎的网页背景图片整合到一起,这样做可以有效的减少http对图片的请求次数,而不需要加载多次加载零碎的背景图片,所以合理的利

雪碧图的使用方法

CSS Sprites技术被国人称为CSS雪碧图,它是将一张网页中的一些图片拼凑在一张图片中,这样可以减少服务器的压力,因为它也减少了用户的请求次数. 雪碧图常用于一些小的零碎的图片,或者一组有序的图片. 比如这一张图片就是一张雪碧图 使用雪碧图主要的两个代码为: background-image backgorund-position 首先使用background-image:url(图片地址);将整张背景图放入需要的地方,设置div的宽高,然后再使用backgorund-position:x