web中的图⽚（imgbackground）操作
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 复合属性;
html如何设置图片滚动
a.⼀个声明设置所有的属性
b.值得顺序依次为
background-color  background-image  background-repeat  background-attachment  background-position          以上属性⽆需全部使⽤，可以按照页⾯的时间需要使⽤，没有设定的属性的值使⽤默认值；
建议使⽤符合属性进⾏背景的定义，不仅代码⾼效，针对⽼版本浏览器兼容性也更好;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。