到底该用img还是background-image?(代码片段)

heioray heioray     2022-12-21     416

关键词:

在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式实现,哪种更好呢?
一般情况下,可能就是哪种顺手用哪个,因为都能实现需要的功能,但如果都是这样的话,html也就没必要做两个标签了。下面就来看一下两者的区别:

项目 image backgroud-image
所属 dom元素、内容类、 css样式、修饰类、
图层位置 前景 背景
默认初始尺寸 不定 固定
是否会产生回流重绘 不会
图片加载失败 dom尺寸默认0,点击事件难以响应 dom背景无,其他点击事件正常
样式文件加载失败 正常显示 dom消失
使用场景 logo、产品图片、广告图片 背景图、角标等

从上面可以看出来,img更适合作为内容部分渲染到页面里面,即便样式文件加载失败,也要让用户可以看到的,属于必须要的元素,特别适合作为广告宣传、产品展示类的使用。
而background则相对更适合做修饰类的,即便没能正常加载也并不影响页面整体的内容展示和用户交互,属于锦上添花类型的。

但是这两种方式又都存在着表中所列出的一些问题,针对这些问题,可以做如下优化:
1、img标签指定宽高尺寸,避免页面回流重绘。指定alt属性或者默认图片,在图片加载失败的时候备用。
2、logo元素同时使用img标签和background,并指定不同的图片源,比如一个用资源服务器图片,一个用base64编码(合适的话),避免那个元素加载不出来导致宣传效果达不到。

其实说了这些,也还是要看个人的开发习惯和保证产品完整性需要,下回见吧

img和background-image优劣比较

一.简单来说,img是内容部分的东西,css的background-image是修饰性的东西。img------从页面元素来说,如果是页面中的图片是作为内容出现的,比如广告图片,比如产品图片,那么这个必然是用img了,因为这个是页面元素内容。页面... 查看详情

到底什么时候该用多线程

...相关的线程类库或API改善程序,并使其正常运行;但是,到底存不存在一种判断依据,能够明确的指导我们正确地使用多线程机制来解决问题呢?笔者对此进行了一番思考,在此说说我的想法以供参考。  查看详情

background-image和img

...:1920x526    div容器:1423x526   1.background-image:样式实现   img:标签或者html组建实现 2.一般来说,如果 查看详情

img和background-image的区别

background-image是背景图片,是css的一个样式    <img/>是一个块级元素,它是一个图片,是html的一个标签    background-image是只能看的     <img/>是可以操作的。比如更换imgsrc的路... 查看详情

好程序员分享该如何选择background-image和img标签

  好程序员分享该如何选择background-image和img标签,用img标签  如果你希望别人打印页面时候包含这张图片请使用img标签  当这张图片有非常有意义的语义,比如警告图标,请使用img标签及它的alt属性。这样意味着你可以... 查看详情

html页面插入图片,使用background还是img标签

...css的时候,老师又会教你给div等元素添加背景图片,div{background-image:url(xxx.png);}  那么这两种方式究竟孰优孰劣,分别应该在什么情况下使用呢?今天我在这里就给大家详细讲解一下:  关于img标签,我们要知道,它除了sr 查看详情

用 php 将 img 替换为 background-image div

】用php将img替换为background-imagediv【英文标题】:Replaceimgtobackground-imagedivwithphp【发布时间】:2015-10-2505:09:32【问题描述】:有没有办法用下面的div标签替换img标签?原始html:<divclass="article"><imgsrc="/images/img-1.jpg"></div>... 查看详情

各种机械键盘轴的区别,我到底该用什么轴?

...键盘什么牌子好?》3.《各种机械键盘轴的区别,到底什么轴好》——这篇文章是前辈总结的机械键盘什么轴好之所以有各种机械键盘轴,是为了使用户能 查看详情

哪个是创建圆形按钮的更好方法:<img> 或 background-image? [复制]

】哪个是创建圆形按钮的更好方法:<img>或background-image?[复制]【英文标题】:Whichisabetterwaytocreatecircularbuttons:<img>,orbackground-image?[duplicate]【发布时间】:2013-03-1801:13:59【问题描述】:我有两种创建圆形按钮的方法:http:... 查看详情

imginput到底是行内还是块级元素?

一、img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。   行内非替换元素,例如,height/width/paddingtop、bottom/margintop、bottom均无效果。只能用paddingleft、right和margin left、right改变宽度。 ... 查看详情

vue的style绑定显示background-image

data(){return{img:require(‘你的json资源路径‘)}}:style="{backgroundImage:‘url(‘+img+‘)‘}"  查看详情

我该用java12还是坚持java11?

距离Java11的正式发布已过去四个多月,而Java12也正在赶来的路上。根据此前的一项关于开发者使用的Java版本的调查显示,Java8仍然是开发者的主流选择,而Java11是Java8之后的首个LTS版本,所以有不少开发者表示会选择升级至Java11... 查看详情

asp.net网站css中background-image:url路径的问题

第一中,如下所示的目录结构,background-Image:url的路径怎么写第二种,这种情况下怎么写就是第二种目录,让我头痛,怎么写背景图总是显示不了,求解!同级文件夹的话,直接写名字就好了,就是你的第一种情况url就是img.jpg... 查看详情

ios跨平台开发,该用flutter还是swift?(代码片段)

👇👇关注后回复 “进群” ,拉你进程序员交流群👇👇【CSDN编者按】在商业和开源代码中被广泛使用的Flutter和Swift你更中意哪一个呢?本文对两者的优势、性能、流行度等方面进行比较分析,帮助... 查看详情

用const还是用let?

...nst,加上原来的var,一共就有三种方式来声明变量了。那到底该用哪个呢?关于“尽可能不用var”这一点,大家应该没有什么意见分歧(其实还是有少数人不这么想的),关于“是用let还是用const”,社区里主要有两... 查看详情

ros和ros2.0到底该用哪个呢?

很多朋友经常问ROS1.0(下文简称ROS)和ROS2.0我到底该学习/使用哪个呢?欢迎拍砖讨论,但若是因此对您的项目或产品造成了损失,本人不负任何责任!我先给出个人的观点,再说明其中原因。对于大众学习者、普通开发者、机... 查看详情

css中,div的background-image和img的图片可以放大或者缩小像素吗?

有时提供的背景图片不够大,想要在网页中放大你好,背景不能放大和缩小的。追问那如果图片太小,只能换图片了吗?追答设置背景图片的同时,你可以设置背景颜色。当图片不够大的时候,就会被颜色填充上。背景图片设计... 查看详情

如何淡化变化的背景图像

...述】:我想在执行此代码时淡化图像:$("#large-img").css(\'background-image\',\'url(\'+$img+\')\');我试过在很多地方添加淡入淡出。谢谢【问题讨论】:@fade..你的问题是什么?您是在问如何淡化,还是您尝试过如何通过该代码 查看详情