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

css背景图⽚与img标签的区别梳理⼀ 简单区分背景图⽚会等到html结构加载完成才开始加载img标签是⽹页结构的⼀部分，会在html结构加载的时候加载当加载失败时，背景图⽚在加载失败或路径找不到时，不会显⽰图⽚标记，img标签在加载失败或找不到路径时，会显⽰⼀个撕裂的⼩图标标记⼆ 何时⽤img，何时⽤背景图1>使⽤img作为html结构内容的⼀部分展⽰从后台传过来的数据对图⽚进⾏缩放操作利于搜索引擎搜索时2>使⽤背景图不是html结构的⼀部分图像代替⽂本使⽤时缩短下载时间时为不同的屏幕分辨率展⽰不同的图像时(media查询时使⽤背景图)所谓数据图就是从后台获取的图⽚，⼀般就⽤img标签显⽰，其他的图⽚⼀般就作为背景图展⽰三 img标签⽇常使⽤场景图⽚缩放可以使⽤rem布局页⾯，给盒⼦定⼀个固定宽度，盒⼦下⾯的img标签给宽度100%（即给⽗盒⼦固定的rem宽度（宽跟图⽚宽⼀致），⼦级img标签宽度100%继承⽗级宽度即可）这样可以解决图⽚在页⾯放⼤缩⼩的时候 图⽚等⽐缩放，并且保证盒⼦之间的间距不变注意给img标签如下使⽤，会出现盒⼦与盒⼦之间的间距被侵占或者间隔变⼤img{

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

四 css背景图⽚的属性背景类属性（css2的5个 css3 新增3个）css 2background-color：背景颜⾊background-image：url（“图⽚路径”）背景图⽚的路径background-repeat：no-repeat； 背景图⽚的平铺⽅式background-position：center center 背景图⽚的定位background-attachment：fixed 背景图⽚是否滚动fixed ：背景图⽚相对于窗体固定scroll ：背景图⽚相对于元素固定 ，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本⾝。但会随元素的祖先元素或窗体⼀起滚动。复合：background：#000 url（） no-repeat center center fixed五个值，位置没有要求补充background-repeat:no-repeat; 图⽚不平铺 :repeat; 平铺/默认值 :repeat-x; x轴/⽔平⽅向平铺 :repeat-y; y轴/垂直⽅向平铺背景颜⾊要写在背景图⽚属性连写后⾯ 因为背景属性连写会有默认的背景颜⾊**注意背景颜⾊有三种表⽰⽅法，其中rgba可以表⽰透明度/* 透明第⼀种写法: */ background-color:rgba(255,0,0,0.2); /* 透明第⼆种写法: */ background-color: rgb(255,0,0 ); opacity: 0.2;rgba()透明度不会透明内容opacity会透明内容css 3background-size：cover；背景尺⼨cover：将背景图像等⽐缩放到完全覆盖容器，背景图像有可能超出容器contain ：将背景图像等⽐缩放到宽度或⾼度与容器的宽度或⾼度相等，背景图像始终被包含在容器内auto ：背景图像的真实⼤⼩percentage：⽤百分⽐指定背景图像⼤⼩，不允许负值width值/height值background-clip 背景裁减padding-box： 从padding区域（不含padding）开始向外裁剪背景。border-box： 从border区域（不含border）开始向外裁剪背景。content-box： 从content区域开始向外裁剪背景。text： 从前景内容的形状（⽐如⽂字）作为裁剪区域向外裁剪，如此即可实现使⽤背景作为填充⾊之类的遮罩background-origin 背景显⽰的原点padding-box： 从padding区域（含padding）开始显⽰背景图像。border-box： 从border区域（含border）开始显⽰背景图像。content-box： 从content区域开始显⽰背景图像。

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

css背景图⽚与img标签的区别梳理⼀ 简单区分背景图⽚会等到html结构加载完成才开始加载img标签是⽹页结构的⼀部分，会在html结构加载的时候加载当加载失败时，背景图⽚在加载失败或路径找不到时，不会显⽰图⽚标记，img标签在加载失败或找不到路径时，会显⽰⼀个撕裂的⼩图标标记⼆ 何时⽤img，何时⽤背景图1>使⽤img作为html结构内容的⼀部分展⽰从后台传过来的数据对图⽚进⾏缩放操作利于搜索引擎搜索时2>使⽤背景图不是html结构的⼀部分图像代替⽂本使⽤时缩短下载时间时为不同的屏幕分辨率展⽰不同的图像时(media查询时使⽤背景图)所谓数据图就是从后台获取的图⽚，⼀般就⽤img标签显⽰，其他的图⽚⼀般就作为背景图展⽰三 img标签⽇常使⽤场景图⽚缩放可以使⽤rem布局页⾯，给盒⼦定⼀个固定宽度，盒⼦下⾯的img标签给宽度100%（即给⽗盒⼦固定的rem宽度（宽跟图⽚宽⼀致），⼦级img标签宽度100%继承⽗级宽度即可）这样可以解决图⽚在页⾯放⼤缩⼩的时候 图⽚等⽐缩放，并且保证盒⼦之间的间距不变注意给img标签如下使⽤，会出现盒⼦与盒⼦之间的间距被侵占或者间隔变⼤img{

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

四 css背景图⽚的属性背景类属性（css2的5个 css3 新增3个）css 2background-color：背景颜⾊background-image：url（“图⽚路径”）背景图⽚的路径background-repeat：no-repeat； 背景图⽚的平铺⽅式background-position：center center 背景图⽚的定位background-attachment：fixed 背景图⽚是否滚动fixed ：背景图⽚相对于窗体固定scroll ：背景图⽚相对于元素固定 ，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本⾝。但会随元素的祖先元素或窗体⼀起滚动。复合：background：#000 url（） no-repeat center center fixed五个值，位置没有要求补充background-repeat:no-repeat; 图⽚不平铺 :repeat; 平铺/默认值 :repeat-x; x轴/⽔平⽅向平铺 :repeat-y; y轴/垂直⽅向平铺背景颜⾊要写在背景图⽚属性连写后⾯ 因为背景属性连写会有默认的背景颜⾊**注意背景颜⾊有三种表⽰⽅法，其中rgba可以表⽰透明度/* 透明第⼀种写法: */ background-color:rgba(255,0,0,0.2); /* 透明第⼆种写法: */ background-color: rgb(255,0,0 ); opacity: 0.2;rgba()透明度不会透明内容opacity会透明内容css 3background-size：cover；背景尺⼨cover：将背景图像等⽐缩放到完全覆盖容器，背景图像有可能超出容器contain ：将背景图像等⽐缩放到宽度或⾼度与容器的宽度或⾼度相等，背景图像始终被包含在容器内auto ：背景图像的真实⼤⼩percentage：⽤百分⽐指定背景图像⼤⼩，不允许负值width值/height值background-clip 背景裁减padding-box： 从padding区域（不含padding）开始向外裁剪背景。border-box： 从border区域（不含border）开始向外裁剪背景。content-box： 从content区域开始向外裁剪背景。text： 从前景内容的形状（⽐如⽂字）作为裁剪区域向外裁剪，如此即可实现使⽤背景作为填充⾊之类的遮罩background-origin 背景显⽰的原点padding-box： 从padding区域（含padding）开始显⽰背景图像。border-box： 从border区域（含border）开始显⽰背景图像。content-box： 从content区域开始显⽰背景图像。