图片引用的两种方式background-image和img的区别

落日映苍穹つ 2022-05-27 12:12 532阅读 0赞

发现问题的地方：  
在模拟百度首页进行制作的时候，在百度的搜索文本框中有一个小照相机，这个照相机是一个图片的一部分，在鼠标移动到这个地方的时候它自动换到图片的下半部分进行变色，而这个图片的引用就是使用的background-image引用的，但是使用img标签却没法达到这种效果。这是为什么呢？

img 元素：定义为向网页中嵌入一幅图像。从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 **标签创建的是被引用图像的占位空间。**

Background-image: url():定义是此属性为设置背景图像，**元素的背景占据了元素的全部尺寸**。包括内边距和边框，但是不包括外边距。  
重点解释以下这两句话：  
**首先应当明确的是html文件的运行顺序是先加载html结构再进行css的加载和修饰。**  
1：`img`标签是一个结构语言，他为引用的图片创造了一个占位空间，我把这个行为比作是吹气球，气球（结构）有多大是由他吹进去的气体（引用的图片）决定的。这个结构的大小是根据里面的内容所决定的。`/*input2的css代码*/ .input2 img { display:inline-block; background-position:0; width: 20px; height: 20px; position: absolute; margin-left: -30px; margin-top: 10px; background-repeat: no-repeat; } .input2 img:hover { background-position: 0 -20px; }  <div class="input2"> <input class="search-word" type="text" name="question"> <img src="camera.png" alt="照相机图片"/> <input class="search-button" type="button" value="百度一下"> </div>`  
2：`background-image`。定义要求“**元素的背景占据了元素的全部尺寸”**。属性是为元素创造一个背景图片，这个元素就非常重要了！如果元素的全部尺寸为零，那这个背景该如何安放？我把这个属性比作是往一个盒子（元素）里面放东西（背景图片），如果这个盒子的大小为零，你的东西（背景图片）怎么能放的进去？所以要想放进去图片就必须得让这个盒子具有大小，即这个盒子的width和height都不能为零！所以由此引申出来，能容纳这个背景图片的元素必须是一个有着不为0的width和height的块状元素。`/*input1的css代码*/ .input1 span { display:inline-block; background-image: url(camera.png); width: 20px; height: 20px; position: absolute; margin-left: -30px; margin-top: 10px; background-repeat: no-repeat; } .input1 span:hover { background-position: 0 -20px; }  <div class="input1"> <input class="search-word" type="text" name="question"> <span></span> <input class="search-button" type="button" value="百度一下"> </div>`![这里写图片描述][70]  
【为什么必须要有具体的width和height呢?】  
这个解释就有些重复了，但我还是结合加载顺序说一下对这个的理解吧。 我的理解是：background-image是在css中进行引用的，他和img标签不同。一个html文件加载的时候是先加载html结构的，所以img标签中的图片会直接在结构中加载显现出来，而在css中引用图片就不一样了。如果在body中留给这个引用图片的标签大小是0的，那么这个图片将无法显示出来，原因在上边说了，你这一个盒子的大小为零怎么将东西放进去？ （**背景图片的显示完全是由你的元素的大小所决定的**）`/*css代码*/ .k { background-color: yellow; height:100px; } .k span { display:inline-block; height:100px; width:100px; background-image: url(position.jpg); background-repeat: no-repeat; }  <div class="k"> <span>kakaka</span> </div>`![这里写图片描述][70 1]  
`/*css代码。当元素不为空，但是没有设置高度和宽度时*/ .k { background-color: yellow; height:100px; } .k span { display:inline-block; background-image: url(position.jpg); background-repeat: no-repeat; }  <div class="k"> <span>kakaka</span> </div>`![这里写图片描述][70 2]

【如何确定/调整引用的确定宽度和高度的图片的位置？】  
使用background-position进行调整使用背景图片的位置它有两个值分别表示背景图片沿着x和y轴移动的距离，在学习别人博客的时候我对这种移动判断位置的方式作出了我自己总结与记忆方法：首先明确一点的是初始的图片显示区域是与母图的左上角重合的，我们可以回想到在css中移动一个图片的位置时，我们常常使用margin来进行图片位置的操纵：使用margin-top：（负数）；margin-left(负数)来向上向左移动。所以类似的在background-position：x y；中属性值x和y常常是负数；如此记忆我觉得还是较为易理解的。（如图）  
![这里写图片描述][70 3]  
`/*css代码，当鼠标移动到照相机时，变换背景图片区域*/ .input1 span:hover { background-position: 0 -20px; }`  
![这里写图片描述][70 4]  
【两者应用场景的区别】  
通常是非内容的图片，或者是要引用图片中的一部分图标，就使用background-image写在css里面(用来**修饰页面**的元素)，如果是内容性的图片就使用img标签写在html里面。

[70]: /images/20220527/1e8b5a3269ab48cbbe98159203bc27db.png
[70 1]: /images/20220527/f287fa0fa4c244ce830ab496479c49de.png
[70 2]: /images/20220527/3a074a0a617d4ff5aabac6d5cdd629de.png
[70 3]: /images/20220527/8e36cf62c5ef4aca9873a0537e70468f.png
[70 4]: /images/20220527/e7e699ecc3ae47ab8b9ce61d3fceaf93.png