html图片当背景 no,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 2

background-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轴/垂直方向平铺

image.png

背景颜色要写在背景图片属性连写后面 因为背景属性连写会有默认的背景颜色**

注意背景颜色有三种表示方法，其中rgba可以表示透明度

/* 透明第一种写法: */

​ background-color:rgba(255,0,0,0.2);

/* 透明第二种写法: */

​ background-color: rgb(255,0,0 );

​ opacity: 0.2;

rgba()透明度不会透明内容

opacity会透明内容

css 3

background-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区域开始显示背景图像。