2023年6月21日发(作者：)

web中的图⽚（imgbackground）操作

web图⽚的格式（⼤部分格式） 图⽚格式 压缩⽅式 透明度 动 画 适应场景 jpg 有损压缩 不⽀持 不⽀持 照⽚|⽂章配图|⼴告图 png ⽆损压缩 ⽀持 不⽀持 透明图|图标|简单背景

gif ⽆损压缩 ⽀持 ⽀持 图标|⼩动画|表情包jpg图⽚ a.后缀为.jpg或.jpeg b.⾊彩丰富，过渡平滑，适⽤于照⽚类型 c.有压缩⽐，压缩⽐越⾼，图⽚质量越低，但⽂件越⼩; d.⽆法保存透明度,不能呈现动画效果; png图⽚ a.后缀为.png,有8位，24位，32位三种形式 b.兼具jpg和gif的彩⾊模式，压缩⽐⾼，⽣成⽂件的体积⼩; -8位可以实现全透明/不透明的效果 -24(32)位可以实现半透明的效果; e.不能实现动画; gif图⽚ a.后缀.gif

b.只包含256种⾊彩,适⽤于简单和单纯的图像; c.可以实现全透明|不透明的效果 d.可以包含多帧画⾯，实现⼩动画 总结： 1.照⽚或⾊彩丰富的图⽚jpg； 2.透明效果：png； 3.⾊彩单纯的⼩图(logo|图标|重复背景等):png 4.⼩动画：gif应⽤的途径： 1.图⽚内容（作为⽹页的内容数据，html进⾏结构化） 写在html⽹页结构中，以标签的形式关联图⽚ 2.背景图⽚（作为⽹页的修饰效果，css进⾏表现） 写在css样式表中，如使⽤background属性定义背景图; 内容图⽚和背景图⽚的应⽤区别 内容图⽚是⽹页数据的⼀部分，在页⾯中占位，如果加载出问题或失败，则会出现占位的标记，影响页⾯的排版或布局； 背景图⽚仅⽤来装饰和美化页⾯，在页⾯标记中没有占位，如果加载失败，对页⾯的排版没有影响;

判断使⽤内容图 or 背景图 1.内容图⽚⼀般具有内容意义，属于⽂档内容，应该使⽤html标签元素; 如 公司logo|⽤户照⽚|新闻配图|⼴告宣传图|产品图|压缩图等 2.背景图不具备内容的涵义，作为修饰html元素存在,即便不可⽤也不会影响到页⾯的可⽤性; 如背景修饰图案|内容图⽚点缀等图像标签 a.单标签 b.⾏间元素，但默认inline-block效果,可以直接使⽤于盒⼦模型 c.标签不能直接在⽹页中插⼊图像，⽽是指定⼀个链接图像的⽂件的地址，因此 标签的创建是被引⽤图像的占位空间; 属性： src 必须属性；指定图像链接路径; alt 必须属性;规定图像的替代⽂本（图⽚⽆法正常加载的时候起到替换⽂本的作⽤） title ⿏标滑过时显⽰的⽂字提⽰信息 width 宽：（推荐使⽤css实现） height：⾼（推荐使⽤css实现）alt属性和title属性的区别 alt属性是必须的即alt="" title属性可以根据需求来设置; alt 的值是⽤来说明图⽚内容的涵义的; b.浏览器没法“看”图，需要通过alt来认知图⽚的意义; c.当图⽚⽆法呈现的时候,alt会替代图⽚出现，让浏览者知道图⽚的意义; title 的值是⽤来说明图⽚（元素）的⼀些额外信息; b.⿏标移动到图⽚（元素）上呈现的提⽰⽂本; ⽂本能够很好的增强⽤户的体验

widht&height 和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 以上属性⽆需全部使⽤，可以按照页⾯的时间需要使⽤,没有设定的属性的值使⽤默认值； 建议使⽤符合属性进⾏背景的定义，不仅代码⾼效，针对⽼版本浏览器兼容性也更好;

2023年6月21日发(作者：)

web中的图⽚（imgbackground）操作

web图⽚的格式（⼤部分格式） 图⽚格式 压缩⽅式 透明度 动 画 适应场景 jpg 有损压缩 不⽀持 不⽀持 照⽚|⽂章配图|⼴告图 png ⽆损压缩 ⽀持 不⽀持 透明图|图标|简单背景

gif ⽆损压缩 ⽀持 ⽀持 图标|⼩动画|表情包jpg图⽚ a.后缀为.jpg或.jpeg b.⾊彩丰富，过渡平滑，适⽤于照⽚类型 c.有压缩⽐，压缩⽐越⾼，图⽚质量越低，但⽂件越⼩; d.⽆法保存透明度,不能呈现动画效果; png图⽚ a.后缀为.png,有8位，24位，32位三种形式 b.兼具jpg和gif的彩⾊模式，压缩⽐⾼，⽣成⽂件的体积⼩; -8位可以实现全透明/不透明的效果 -24(32)位可以实现半透明的效果; e.不能实现动画; gif图⽚ a.后缀.gif

b.只包含256种⾊彩,适⽤于简单和单纯的图像; c.可以实现全透明|不透明的效果 d.可以包含多帧画⾯，实现⼩动画 总结： 1.照⽚或⾊彩丰富的图⽚jpg； 2.透明效果：png； 3.⾊彩单纯的⼩图(logo|图标|重复背景等):png 4.⼩动画：gif应⽤的途径： 1.图⽚内容（作为⽹页的内容数据，html进⾏结构化） 写在html⽹页结构中，以标签的形式关联图⽚ 2.背景图⽚（作为⽹页的修饰效果，css进⾏表现） 写在css样式表中，如使⽤background属性定义背景图; 内容图⽚和背景图⽚的应⽤区别 内容图⽚是⽹页数据的⼀部分，在页⾯中占位，如果加载出问题或失败，则会出现占位的标记，影响页⾯的排版或布局； 背景图⽚仅⽤来装饰和美化页⾯，在页⾯标记中没有占位，如果加载失败，对页⾯的排版没有影响;

判断使⽤内容图 or 背景图 1.内容图⽚⼀般具有内容意义，属于⽂档内容，应该使⽤html标签元素; 如 公司logo|⽤户照⽚|新闻配图|⼴告宣传图|产品图|压缩图等 2.背景图不具备内容的涵义，作为修饰html元素存在,即便不可⽤也不会影响到页⾯的可⽤性; 如背景修饰图案|内容图⽚点缀等图像标签 a.单标签 b.⾏间元素，但默认inline-block效果,可以直接使⽤于盒⼦模型 c.标签不能直接在⽹页中插⼊图像，⽽是指定⼀个链接图像的⽂件的地址，因此 标签的创建是被引⽤图像的占位空间; 属性： src 必须属性；指定图像链接路径; alt 必须属性;规定图像的替代⽂本（图⽚⽆法正常加载的时候起到替换⽂本的作⽤） title ⿏标滑过时显⽰的⽂字提⽰信息 width 宽：（推荐使⽤css实现） height：⾼（推荐使⽤css实现）alt属性和title属性的区别 alt属性是必须的即alt="" title属性可以根据需求来设置; alt 的值是⽤来说明图⽚内容的涵义的; b.浏览器没法“看”图，需要通过alt来认知图⽚的意义; c.当图⽚⽆法呈现的时候,alt会替代图⽚出现，让浏览者知道图⽚的意义; title 的值是⽤来说明图⽚（元素）的⼀些额外信息; b.⿏标移动到图⽚（元素）上呈现的提⽰⽂本; ⽂本能够很好的增强⽤户的体验

widht&height 和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 以上属性⽆需全部使⽤，可以按照页⾯的时间需要使⽤,没有设定的属性的值使⽤默认值； 建议使⽤符合属性进⾏背景的定义，不仅代码⾼效，针对⽼版本浏览器兼容性也更好;