CSS面试须知--关于图片

常见的图片格式：

1. jpg图像格式：
   JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式的
2. gif图像格式：
   GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果
3. png图像格式
   是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景
4. PSD图像格式
   PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。

使用图片的规范

内容图

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大

• 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
• 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
• PC平台单张的图片的大小不应大于 200KB。

背景图

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

• PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
• 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
• 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
• 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
• 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

插入图片和背景图片区别

1. 插入图片 ，用的最多， 比如产品展示类 移动位置只能靠盒模型。 padding margin
2. 背景图片我们一般用于小图标背景 或者 超大背景图片 。 背景图片 只能通过 background-position

精灵图 （针对背景图）

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。
有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
方法：

1. 精确测量，每个小背景图片的大小和 位置。
2. 给盒子指定小背景图片时， 背景定位基本都是 负值。
3. 需要使用CSS的 background综合写法，其中最关键的是使用background-position 属性精确地定位。

字体图标

优点：

可以做出跟图片一样可以做的事情,改变透明度、旋转度，等…
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备很需要

使用流程：

1. UI人员设计
2. 前端开发人员转换成页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。
   推荐网站：icomoon字库
3. 下载兼容字体包
4. 字体引入到HTML
   得到压缩包之后，我们得知字体图标 本质就是 字体文件。 这个压缩包不要删掉！！！！！！
   4.1 首先把 fonts文件夹放入我们 根目录下 。
   4.2 html标签内里面添加结构
   4.3 在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)

4.4 给盒子使用字体

span {
		font-family: "icomoon";
	}

4.5 如果后续需要，我们还要追加字体图标 （这里就体现出上边压缩包没有删除的重要性了）
原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做：把压缩包里面的selection.json 重新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。

网站ico图标

• 首先把favicon.ico 这个图标放到根目录下。

• 再html里面， head 之间 引入 代码。
  <link rel="shortcut icon" href="favicon.ico" />

制作ico：

• 首先把我们想要的切成图片。
• 要把图片转换为 ico 图标，我们借助于第三方转换网站： 比特虫。

LOGO的优化

• logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
• h1里面在放一个连接，可以返回首页的， 给连接一个 大小 和 logo 的背景图片
• 连接 里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来
  • 要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法
  • 直接给font-size: 0; 就看不到文字了， 京东的做法。
• 最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了

知识点内容来自教学视频，自己总结归纳。