img 元素和 background-image 属性的区别

简介: 前端西瓜哥

大家好,我是前端西瓜哥。今天带大家学习 img 元素和 background-image 属性的区别。

image.png

img 是 HTML 元素,基本用法如下:

<img src="./img.jpg" alt="图片描述" />

background-image 则是一个 CSS 样式属性,用于设置元素的背景图片。

.bg {
  background-image: url("./img.jpg");
}

img 是内容的一部分

首先 img 是 DOM 树的一部分,属于网页的内容

有些客户端(比如爬虫、性能差的电子阅读器)不会解析样式或执行脚本,但包括 img 在内的 DOM 树是一定会解析的。即使客户端不解析图片,也可以获得 img 的 alt 内容,得到图片的描述。

而 background-image 则是 装饰,用于美化内容。

所以,如果你的图片是和正文内容有关的,建议使用 img,有利于语义化和 SEO。

二者的特性

img 即使不手动设置宽高,也会自定占据空间,将其他元素挤开。

background-image 则作用在元素上,本身不能撑开元素。

background-image 可以配合背景图片相关属性,实现各种效果,比如雪碧图、平铺瓷砖等,这是 img 元素做不到的。

雪碧图(CSS sprite),指的是将多个小图标放到一个图片上。然后通过 width、height、background-position 来框选想要用的图标。

加载时机

img 会比 background-image 先加载,因为渲染过程为先解析 DOM 树,然后再应用样式树。如果 background-image 还是在一个外链的 css 文件中,加载时机会更晚。

所以 background-image 更适合作为 banner 轮播图、广告图。因为 banner 通常都是广告,可以晚点加载,不要阻塞其他内容。

此外,延后加载时机还可以使用 JS 脚本加载的方式。

打印

使用浏览器的打印功能。img 会被渲染,但 background-image 却会被丢弃。

如果你希望你的网页支持良好的打印效果,且图片也是必要的内容,使用 img。

右键保存

在浏览器中,img 元素可以点击鼠标右键的方式下载保存图片。但 background-image 不行。

你可以根据需要来决定是否提供用户右键保存的功能。

当然,并不是总能阻止,如果用户能够使用且熟悉浏览器开发者工具,他也可以找到对应资源下载。

结尾

img 是内容的一部分,background-image 则是装饰。他们有各自的特性,需要根据实际需求选择使用。

相关文章
|
运维 Linux 数据安全/隐私保护
jumpserver详解(七)——jumpserver初始化设置
jumpserver详解(七)——jumpserver初始化设置
379 2
|
JavaScript
Js 实现十六进制颜色值和RGB颜色值转换整理
Js 实现十六进制颜色值和RGB颜色值转换整理
340 0
|
监控 物联网 数据安全/隐私保护
蓝牙调试工具集合汇总
蓝牙调试工具集合汇总
657 0
|
传感器 监控 测试技术
Visual studio 2019常用快捷键_kaic
Visual studio 2019常用快捷键_kaic
|
11月前
|
缓存 前端开发 UED
前端 8 种图片加载优化方案梳理
本文首发于微信公众号“前端徐徐”,详细探讨了现代网页设计中图片加载速度优化的重要性及方法。内容涵盖图片格式选择(如JPEG、PNG、WebP等)、图片压缩技术、响应式图片、延迟加载、CDN使用、缓存控制、图像裁剪与缩放、Base64编码等前端图片优化策略,旨在帮助开发者提升网页性能和用户体验。
2236 0
|
10月前
|
消息中间件 存储 缓存
十万订单每秒热点数据架构优化实践深度解析
【11月更文挑战第20天】随着互联网技术的飞速发展,电子商务平台在高峰时段需要处理海量订单,这对系统的性能、稳定性和扩展性提出了极高的要求。尤其是在“双十一”、“618”等大型促销活动中,每秒需要处理数万甚至数十万笔订单,这对系统的热点数据处理能力构成了严峻挑战。本文将深入探讨如何优化架构以应对每秒十万订单级别的热点数据处理,从历史背景、功能点、业务场景、底层原理以及使用Java模拟示例等多个维度进行剖析。
291 8
|
9月前
|
存储 网络协议 编译器
【C语言】深入解析C语言结构体:定义、声明与高级应用实践
通过根据需求合理选择结构体定义和声明的放置位置,并灵活结合动态内存分配、内存优化和数据结构设计,可以显著提高代码的可维护性和运行效率。在实际开发中,建议遵循以下原则: - **模块化设计**:尽可能封装实现细节,减少模块间的耦合。 - **内存管理**:明确动态分配与释放的责任,防止资源泄漏。 - **优化顺序**:合理排列结构体成员以减少内存占用。
685 14
|
JavaScript 前端开发
JavaScript——快速判断数组对象的值是否全部满足条件
JavaScript——快速判断数组对象的值是否全部满足条件
185 0
|
JavaScript 开发工具 数据安全/隐私保护
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
npm包【详解】(内含npm包的开发、发布、安装、更新、搜索、卸载、查看、版本号更新规则、package.json详解等)
347 0
|
移动开发 前端开发 数据处理
探索前端性能优化的新思路:使用Web Workers提升网页响应速度
传统的前端性能优化方法已经不能完全满足日益增长的网页需求。本文提出了一种新的思路,即利用Web Workers技术来提升网页的响应速度。通过将耗时的计算任务交给Web Workers处理,可以避免主线程阻塞,从而提高网页的用户体验。本文将介绍Web Workers的基本原理、使用方法以及在前端性能优化中的应用实例,帮助开发者更好地理解和运用这一技术。

热门文章

最新文章