在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然?

如下场景使用img标签比较合适:

1、如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人),使用Img标签加上alt属性。

2、如果你想打印页面并且你想要的图像包括默认情况下使用IMG。

3、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。

4、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。

5、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。

6、使用img代替有背景图像可以显著提高性能的动画背景。

7、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像,加载样式表加载后,延迟加载的网页。

如下场景使用background-image属性比较合适:

1、如果图像不是内容的一部分时使用backgrond-image。

2、当图像代替文本使用时使用backgrond-image。

3、如果你想打印页面并且你不想要的图像包括默认情况下使用backgrond-image。

4、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。

5、如果你只需要展示图像的一部分通过CSS sprites,时使用backgrond-image。

6、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。

何时使用img标签,何时使用background-image背景图像的更多相关文章

  1. Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处。用来指定播放器 1 2. <object> 标签用于包含对象,比如图像、音

    Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处.用来指定播放器 1 2. <object> 标签用于包含对象,比如 ...

  2. CSS(九):background(背景属性)

    通过CSS背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图像固定等. background-color(背景颜色) background-color属性定义 ...

  3. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  4. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  5. 关于i 标签盛放背景图像

    1.html部分 <div class="hover right"> <i class="log_change state_psd">& ...

  6. VS Code中编写html(4) 标签的宽高颜色背景设置

    1  <!+Tab键--> <!--有两个div标签时,分别设置style,有两种方法--> <div id="div1">第一个div标签:& ...

  7. VS Code中编写html(3) 标签的宽高颜色背景设置

    1 创建一个div标签: <body> <div> 这是一个div标签: </div> </body> 变成了圆圆的,是因为后面有设置了样式: back ...

  8. background: url 背景图片加时间戳不显示图片

    在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...

  9. background:url() 背景图不显示

    奇怪的问题: .box-3 { width: 100%; height: 500px; border: solid 2px red; margin-top: 70px; padding: 0 0 0 ...

随机推荐

  1. windows平台tensorboard的配置及使用

    由于官网和其他教程里面都是以Linux为平台演示tensorboard使用的,而在Windows上与Linux上会有一些差别,因此我将学习的过程记录下来与大家分享(基于tensorflow1.2.1版 ...

  2. 通过进程名称删除进程 ps -ef

    删除进程名为udpserver的进程. kill -9 $(ps -ef|grep udpserver | grep java|awk '{print $2}' ). 1.通过进程名取得进程号: ps ...

  3. 剑指offer-java

    面试题67 机器人的运动范围 题意: 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. ...

  4. Cout<<XXX<<<XXX<<<XXX,是从左到右计算的

    int a=1,b=2,c=3;    cout<<(c=a+b)<<' '<<(a=b+c)<<' '<<(b=a+c)<<e ...

  5. The 15th UESTC Programming Contest Preliminary C - C0ins cdoj1554

    地址:http://acm.uestc.edu.cn/#/problem/show/1554 题目: C0ins Time Limit: 3000/1000MS (Java/Others)     M ...

  6. Jmeter使用流程及简单分析监控(转载)

    转载自:https://www.cnblogs.com/linglingyuese/archive/2013/03/04/linglingyuese-one.html#undefined 一.安装Jm ...

  7. Java Vertor详细介绍和使用示例

    ①对Vector有个整体认识 Vector是向量类,继承于AbstractList,实现了List,RandomAccess,Clonable这些接口. Vector继承于AbstractList,实 ...

  8. 小练手:用HTML5 Canvas绘制谢尔宾斯基三角形

    文章首发于我的知乎专栏,原地址:https://zhuanlan.zhihu.com/p/26606208 以前看到过一个问题:谢尔宾斯基三角形能用编程写出来么?该怎么写? - 知乎,在回答里,各方大 ...

  9. Python面试题之Python反射机制

    0x00 前言 def f1(): print('f1') def f2(): print('f2') def f3(): print('f3') def f4(): print('f4') a = ...

  10. win764位英文版系统unicode编码问题

    出现的编码现象: 1.以*.vga格式的课件文件,当作好可读html之后,仍然不能播放,此时为Unicode编码所致: 2.在编辑TXT文档时,内容凡有中文,在保存时,会提示不能识别,当确认后,中文字 ...