CSS：background-image 和＜img /＞

原创已于 2022-04-20 16:21:08 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2022-04-20 16:06:00 首次发布

本文探讨了HTML的<img>标签与CSS的background-image属性在设置页面图像时的区别。<img>标签用于内容展示，其加载优先级高，而background-image作为修饰元素，加载在DOM结构完成后。理解这两者的差异有助于优化页面加载性能和用户体验。同时，建议为背景图片设置备用颜色，确保图片不可用时页面仍具可读性。

1. background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

2.<img src="图片路径" width="175" height="47" alt="" />

<img> 标签有两个必需的属性： src 和 alt。

可选属性

align	top bottom middle left right	不推荐使用。规定如何根据周围的文本来排列图像。
border	pixels	不推荐使用。定义图像周围的边框。
height	pixels %	定义图像的高度。
hspace	pixels	不推荐使用。定义图像左侧和右侧的空白。
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指向包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。
vspace	pixels	不推荐使用。定义图像顶部和底部的空白。
width	pixels %	设置图像的宽度。

img是内容部分的东西，css的background-image是修饰性的东西。

img-从页面元素来说，如果是页面中的图片是作为内容出现的

background-image-背景图片，修饰性的内容，在页面中可有可无。有，是为了让页面中视觉感受上更美

在网页中的加载顺序不一样，html中的标签<img/>是网页结构（内容）的一部分会在加载结构的过程中加载，以css背景图存在的图片background-image会等到dom结构加载完成（网页的内容标签全部显示以后）才开始加载，既网页会先加载标签<img/>的内容，再加载背景图片background-image。如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。