ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

图片整合

2020-10-25 03:31:26  阅读:275  来源: 互联网

标签:opacity 浏览器 小图标 cursor 整合 hack bug 图片


精灵图  雪碧图 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有