[CSS] 网页引入图片background-image和src区别

在网页中插入图片，可以通过

1、img标签，在src属性中指向图片资源的方式(如下)
<img src="./img/umi-image.jpg" />

2、css中的背景属性background-image: url("path/to/image")的方式(如下)
<div class="common-size bg-url bg-03"></div>
<style>
.bg-url: background-image: url("./img/umi-image.jpg")
<style>

分别说一说两种引入方式的表现

1、img标签src引入的方式
当不给img标签设置尺寸时，引入的图片在html中的尺寸为图片资源自身的尺寸。
通过行内样式(如style="width: 200px; height: 100px")或样式表(如.className的方式)给img标签设置width及height属性值之后，img标签(即 展示的图片尺寸)会变为设置的尺寸，img标签中的图会铺满这个设置好尺寸的容器，最终图片会表现为横向或纵向的拉伸。（如果设置img标签的宽高比与图片的宽高比相同，那图片不会有拉伸）

2、background-image: url("path/to/image")的引入方式

这种引入方式结合background-repeat，background-position，background-size这三个属性能产生多种不同的表现。本文不想讲的太发散，因此先控制变量，在background-repeat: no-repeat; background-position: center; 这种限制条件下来说明。带一点常用的background-size属性的变化。

在background: url("path/to/image") no-repeat center; 这种条件下，被url指向的图片会不缩放、不拉伸，以裁剪的方式出现在容器之中。(若容器尺寸比图片尺寸大，则图片居中放置，边缘留白)

上面的background: url("path/to/image") no-repeat center; 这项配置
等价于background: url("path/to/image") no-repeat center unset;
即增加了(background-size: unset;)

其他background-size的情况:

background: url("path/to/image") no-repeat center;

• background-size: cover;
  设置background-size: cover;参数以后，背景图不拉伸，但会缩放。其表现规律是保持图片原始宽高比，缩放到能够刚好完全覆盖整个容器。(可放大，可缩小)

background: url("path/to/image") no-repeat center;

• background-size: 100% 100%;
  这个设置的表现与img标签引入图片的表现完全一致。

其他情况示例：

上面两张图，先贴代码。

以下图示基础环境均为1920x1080的屏幕，windows系统，系统缩放比100%。

100%网页缩放比的图示。

150%网页缩放比的图示。

改变网页的款高比，缩放比，还有很多不同表现，各位可以自行下载我写的样例代码，修改内置的CSS查看。
https://github.com/DiracKeeko...原生html测试bg-url&img.html

完结。

同步更新到自己的语雀
https://www.yuque.com/diracke...