其他分享
首页 > 其他分享> > 图片整合

图片整合

作者:互联网

精灵图  雪碧图 css sprite   css精灵

优点:

1、降低服务端的压力,减少请求次数

2、降低图片质量,提高还在速度

 

图片整合的规则

1、一定要是小图标

2、整合的图片背景色必须透明png/gif

3、里面的小图标尽量上下排列 每个小图标根据需求留出足够的空间

background-position:-100px 0;上下    左右

 

浏览器内核(核心源码)

Trident  ie浏览器

gecko  火狐

webkit 谷歌/苹果

Blink  欧鹏/谷歌

为什么会出现浏览器兼容问题?因为浏览器内核不同!

BUG 出现的问题/漏洞

HACK解决BUG方法

FILTER过滤器(可以针对每款浏览器设置样式)

1、

bug:表单元素对齐方式不一致

hack:添加浮动

2、

bug:按钮大小不一致

hack:

1,如果是input外层包裹一个元素把大小都给外层元素添加

2,如果按钮是一张图片切图当背景即可

3,没有在表单内部按钮,用a模拟即可

 

3、

bug:鼠标指针不能识别cursor:hand;

hack:cursor:pointer;

cursor属性值们:

move   移动

help    变成一个问号

text    文本

wait   等待

crosshair  加号

progress   过程

ne-resize  向上或向右移动

pointer   手形

inherit  继承

4、

bug:透明度   opacity属性    ie不能识别opacity

hack:opacity:0.5;    filter-alpha(opacity=50)

alpha里面的opacity接收0-100的数字

<meta name="keywords" content=""/>主要关键字

<meta anme="description" content=""/>主要内容

回流(resflow)与重绘(repaint)

注:每个页面至少发生一次回流  相对减少回流提高性能

 

标签:opacity,浏览器,小图标,cursor,整合,hack,bug,图片
来源: https://www.cnblogs.com/ht955/p/13871856.html