HTML - 请你谈一谈img标签图片和background背景图片的区别

 难度级别:中级及以上                                 提问概率:65%


面试官当然不会问如何使用img标签或者background来加载一张图片,这些知识点都很基础,相信只要从事前端开发一小段时间以后,就可以轻松搞定加载图片的问题。但很多人习惯用img标签,很多人习惯用background背景,那么在加载图片的时候,他们有哪些区别呢,什么情况下该用哪一个呢?

1 对容器的要求

虽然两种方式都能显示图片,但日常开发中,img标签即便在不设置宽高的情况下,依然可以将图片渲染出来,只不过我们为了更完美的布局,为其设置一定的显示区域。而background背景图片更依托于DOM元素,如果元素是行内元素,或者未设置宽高,图片则不能被渲染出来。

另外,img标签的宽高设置可以直接改变图片的显示大小,但background背景属性则需要依赖更多的CSS属性设置。但属性复杂也为我们的网页渲染带来了更多的效果,例如background-size可以设置图片的尺寸,或者相对于自身DOM元素的宽高适应情况;例如background-repeat可以设置图片是否平铺渲染

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/604005.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第6章 6.1.1 文本格式化 sprintf函数(MATLAB入门课程)

sprintf函数源自 C 语言标准库中的同名函数,这个函数在 C 语言中用于创建格式化的字符串,且使用频率非常高。作为一门高级编程语言,MATLAB借鉴了 C 语言和其他编程语言中的许多特性和命名惯例。在MATLAB中,sprintf函数主要有两种用…

2024马来西亚电商选品博览会

2024马来西亚电商选品博览会 展会概况 展会名称:2024马来西亚电商选品博览会 主办单位:广东进出口商会 时间:2024.11.29-12.1 地点:马来西亚国际贸易展览中心(MITEC) 展览面积:10000平方米 展会简介 2024马来西亚跨境电商选…

每日一题(leetcode1026):节点与其祖先的最大差值--dfs

考虑到只能计算祖先之间的节点差而不能计算兄弟之间的节点差,所以思考使用dfs来解决该题。 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), ri…

动态代理

动态代理 动态代理和静态代理角色一致。 代理类是动态生成的,不是我们直接写好的。 动态代理分为俩大类:基于接口的动态代理、基于类的动态代理 基于接口:JDK动态代理(以下示例就是这个) 基于类:cglib jav…

PostgreSQL入门到实战-第六弹

PostgreSQL入门到实战 PostgreSQL查询语句(三)官网地址PostgreSQL概述PostgreSQL中ORDER BY理论PostgreSQL中ORDER BY实操更新计划 PostgreSQL查询语句(三) 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://www.post…

Python高级

不定长参数 位置不定长参数&#xff0c;获取参数args会整合为一个元组 def info(*args):print(arg is, args)print(type(arg) is, type(args))info(1, 2, 3, 4, a, b)# 输出 # arg is (1, 2, 3, 4, a, b) # type(arg) is <class tuple> 关键字不定长参数&#xff0c;&…

OJ 连续数的和 球弹跳高度的计算【C判断是否为完全平方数】【格式输出%g输出全部小数部分】

连续数的和 判断是否为完全平方数有两种方法 1.遍历所有小于该数的整数&#xff0c;有一个满足平方与该数相等&#xff0c;则是完全平方数 2.用sqrt()或pow()函数对该数开方&#xff0c;取整&#xff08;舍去小数部分&#xff09;&#xff0c;再平方&#xff0c;与该数相等则…

【前端】学习路线

1、基础 1.1 HTML 菜鸟教程-主页&#xff1a;https://www.runoob.com/ 可以学习&#xff1a;HTML、CSS、Bootstrap等 1.2 CSS 《通用 CSS 笔记、建议与指导》 1.3 JavaScript 1&#xff09;入门&#xff1a;JavaScript 的基本语法 2&#xff09;进阶&#xff1a;现代 …

技术人的管理【屁股决定脑袋】道阻且长...

时间匆匆&#xff0c;转瞬间已是2024年年中。在这短短的半年里&#xff0c;我从一个纯粹的开发者角色向管理者转变&#xff0c;经历了许多挑战和成长。这段旅程充满了波折和收获&#xff0c;也让我更深刻地体会到管理者的责任与使命&#xff0c;管理公司的中台团队&#xff0c;…

《QT实用小工具·二十一》鼠标十字线

1、概述 源码放在文章末尾 该项目实现了界面绘制十字线并跟随鼠标移动的过程&#xff0c;下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget>namespace Ui { class Widget; }class Widget : public QWidg…

常见的mq产品和优点

常见的mq产品和优点 一、什么是mq? MQ全称 Message Queue&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中保存消息的容器。多用于分布式系统之间进行通信&#xff0c;解耦。 二、常见的mq产品 RabbitMQ、RocketMQ、ActiveMQ、Kafka、ZeroMQ、MetaMq …

07-挂载NFS网络文件系统

网络文件系统 网络文件系统&#xff0c;常被称为NFS&#xff08;Network File System&#xff09;&#xff0c;它是一种非常便捷的在服务器与客户端通过网络共享文件的方式。 开启了NFS服务后&#xff0c;客户端访问服务器共享文件时如同访问本地存储器&#xff08;SD卡/磁盘…