到底该用img还是background-image?

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

项目

image

backgroud-image

所属

dom元素、内容类、

css样式、修饰类、

图层位置

前景

背景

默认初始尺寸

不定

固定

是否会产生回流重绘

不会

图片加载失败

dom尺寸默认0,点击事件难以响应

dom背景无,其他点击事件正常

样式文件加载失败

正常显示

dom消失

使用场景

logo、产品图片、广告图片

背景图、角标等

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

标签之美一——HTML基础元素 原

HTML是一种标记语言,因此,标签便是HTML的核心,一些基础标签的用法总结如下:

1202
来自专栏移动开发

Material Design Button 的 disable 效果

针对 Material Design Button 的 disable 效果这里提一下. 我们经常有这样的需要,在按钮在 disable 状态下,背景色会呈现深...

1435
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第一天 HTML【悟空教程】

一天的学习需要使用众多独立没有关联的标签,为了大家更好的吸收,现给出标签总览,以“重要程度”排序。例如:“表格标签”为今天最重要的标签。

3135
来自专栏极乐技术社区

一斤代码深入理解系列(二):微信小程序样式机制

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机...

1907
来自专栏行者常至

(20)Struts2_主题

731
来自专栏Windows Community

Windows 8.1 应用再出发 - 视图状态的更新

本篇我们来了解一下Windows 8.1 给应用的视图状态带来了哪些变化,以及我们怎么利用这些变化作出更好的界面视图。 首先我们来简单回顾一下Windows 8...

2816
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

2376
来自专栏针针小站

【IFE】Day 2 – 百度前端技术学院 基础学院 学习笔记(二)

1324
来自专栏葡萄城控件技术团队

前端代码标准最佳实践:HTML篇

Web前端代码中,HTML是根本,CSS和JavaScript也是围绕着既有的HTML结构来构建,所以良好的HTML代码结构,除了提高了HTML代码的可读性,可...

2709
来自专栏Timhbw博客

Markdown基本语法-自学收藏

2016-05-0918:27:15 发表评论 318℃热度 1.标题 2.待办事项 3.缩写定义 4. 文字格式 5.无序列表 6.有序列表 ...

32811

扫码关注云+社区

领取腾讯云代金券