您的位置:首页 > Web前端 > CSS

base64,雪碧图CSS Sprite,直接使用图片

2016-11-10 15:41 337 查看
base64:

这类图片不能与其他图片以CSS Sprite的形式存在,只能独行
这类图片从诞生之日起,基本上很少被更新
这类图片的实际尺寸很小(几K-10KB,小于10KB)
这类图片在网站中大规模使用

1.CSS Sprite:
可以减少文件体积和服务器请求次数,从而提高效率
一般情况下,你需要保存为PNG-24的文件格式
可以设计出丰富多彩的颜色图标

只在一个页面中用到的小图标可以使用这种方法

2.font + html
灵活性:轻松地改变图标的颜色或其他css效果
可扩展:改变图标的大小,就像改变字体大小一样容易
矢量性:图标是矢量的,与像素无关。缩放图标不会影响清晰度。
兼容性:字体图标支持所有现代浏览器(包括ie6)
本地使用:通过添加定制字体到您的本地系统,你可以在各种不同的设计和编辑应用程序中使用它们
工具下载(IcoMoon)https://icomoon.io
免费的图标,免费的应用程序(400+免费字体图标)
构建只包含您需要的图标
导入您的矢量图(SVG字体),而不会被上传到服务器
方便管理图标,除了生成字体,还可以生成SVG

只所有页面中用到的小图标可以使用这种方法

3.font + css
伪元素:创建一个虚假的元素,并插入到目标元素内容之前

只所有
4000
页面中用到的小图标可以使用这种方法

直接使用图片:

商品图片,大的背景图片,logo图片,品牌图片
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: