web图片的格式（大部分格式）
图片格式 压缩方式 透明度 动 画 适应场景
jpg 有损压缩 不支持 不支持 照片|文章配图|广告图
png 无损压缩 支持 不支持 透明图|图标|简单背景
gif 无损压缩 支持 支持 图标|小动画|表情包
jpg图片
a.后缀为.jpg或.jpeg
b.色彩丰富，过渡平滑，适用于照片类型
c.有压缩比，压缩比越高，图片质量越低，但文件越小;
d.无法保存透明度,不能呈现动画效果;
png图片
a.后缀为.png,有8位，24位，32位三种形式
b.兼具jpg和gif的彩色模式，压缩比高，生成文件的体积小;
c.png-8位可以实现全透明/不透明的效果
d.png-24(32)位可以实现半透明的效果;
e.不能实现动画;
gif图片
a.后缀.gif
b.只包含256种色彩,适用于简单和单纯的图像;
c.可以实现全透明|不透明的效果
d.可以包含多帧画面，实现小动画
总结：
1.照片或色彩丰富的图片jpg；
2.透明效果：png；
3.色彩单纯的小图(logo|图标|重复背景等):png
4.小动画：gif
应用的途径：
1.图片内容（作为网页的内容数据，html进行结构化）
写在html网页结构中，以<img>标签的形式关联图片
2.背景图片（作为网页的修饰效果，css进行表现）
写在css样式表中，如使用background属性定义背景图;
内容图片和背景图片的应用区别
内容图片是网页数据的一部分，在页面中占位，如果加载出问题或失败，则会出现占位的标记，影响页面的排版或布局；
背景图片仅用来装饰和美化页面，在页面标记中没有占位，如果加载失败，对页面的排版没有影响;
判断使用内容图 or 背景图
1.内容图片一般具有内容意义，属于文档内容，应该使用html<img>标签元素;
如 公司logo|用户照片|新闻配图|广告宣传图|产品图|压缩图等
2.背景图不具备内容的涵义，作为修饰html元素存在,即便不可用也不会影响到页面的可用性;
如背景修饰图案|内容图片点缀等
图像标签<img>
a.单标签
b.行间元素，但默认inline-block效果,可以直接使用于盒子模型
c.<img>标签不能直接在网页中插入图像，而是指定一个链接图像的文件的地址，因此<img>
标签的创建是被引用图像的占位空间;
属性：
src 必须属性；指定图像链接路径;
alt 必须属性;规定图像的替代文本（图片无法正常加载的时候起到替换文本的作用）
title 鼠标滑过时显示的文字提示信息
width 宽：（推荐使用css实现）
height：高（推荐使用css实现）
alt属性和title属性的区别
alt属性是必须的即alt="" title属性可以根据需求来设置;
alt a.alt的值是用来说明图片内容的涵义的;
b.浏览器没法“看”图，需要通过alt来认知图片的意义;
c.当图片无法呈现的时候,alt会替代图片出现，让浏览者知道图片的意义;
title a.title的值是用来说明图片（元素）的一些额外信息;
b.鼠标移动到图片（元素）上呈现的提示文本;
c.title文本能够很好的增强用户的体验
widht&height
a.widht和height不需要带单位，默认单位px
b.如果图片指定了widht和高度（通常是图片的本身尺寸）页面加载的时候会保留指定尺寸;
如果没有指定，图片加载失败或出现问题时，img标签的占位空间无法确定，可能会破坏页面的布局；
c.遵循内容和样式的分离，css设定的width或height会优先于img标签中的widht和height;
css设置背景
background-color:背景色
a.设定html元素的背景色，只能定义位纯色；
b.大多数html元素的默认背景色时透明的
background-color:transparent
c.同时设定背景色和背景图片时，背景图片会呈现在背景色之上;
background-image：背景图片
a.通过url路径为元素添加背景图片;
b.图片的表现行为（重复渲染，定位,大小等）由其他的背景属性定义;
background-image:仅定义使用那张图片;
c.默认情况下，背景图像从html元素左上角开始显示,并在水平方向和垂直方向重复排列;
background-repeat：背景图片重复的方式
a.设置是否重复背景图片及如何重复背景图像
b.值
repeat 默认值 背景图片在垂直和水平方向重复
repeat-x 背景图片在水平方向重复
repeat-y 背景图片在垂直方向重复
no-repeat 不允许重复，背景图片仅显示一次;
background-attachment:背景图片附着位置的方式
a.设置背景图片的固定方式（针对不同的参照物）
b.这个属性和background-position容易冲突，因此时间应用中并不常用,通常设置默认值即可;
值：
scroll:默认值；背景图片会随着页面其于部分的滚动而滚动；相对于html元素（容器本身）
fixed ：背景图片位置固定,不会随着页面的其余对象的滚动而滚动;（相对于浏览器窗口）
local: 背景图片的会随着页面其余部分的滚动而滚动；（相对于内容（容器里面的内容））
background-position:背景图片的位置定位
a.设置背景图先的起始点（原点）位置，默认是html元素的左上角;
b.其他的值应该有2个依次 1.横向坐标值 2.纵向坐标值
c.如果指定了1个值，那么改值为横向的坐标值,第二个纵向的坐标值默认为50%（center）
d.值的写法可以用三种形式：像素值 |百分比|范围值
e.运行负值存在；
f.如果background-attachment为fixed,那么background-position会无法正常工作;
background 复合属性;
a.一个声明设置所有的属性
b.值得顺序依次为
background-color background-image background-repeat background-attachment background-position
以上属性无需全部使用，可以按照页面的时间需要使用,没有设定的属性的值使用默认值；
建议使用符合属性进行背景的定义，不仅代码高效，针对老版本浏览器兼容性也更好;