何时使用img标签,何时使用background-image背景图像
在什么情况下更适合使用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背景图像的更多相关文章
- Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处。用来指定播放器 1 2. <object> 标签用于包含对象,比如图像、音
Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处.用来指定播放器 1 2. <object> 标签用于包含对象,比如 ...
- CSS(九):background(背景属性)
通过CSS背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图像固定等. background-color(背景颜色) background-color属性定义 ...
- 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案
最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- 关于i 标签盛放背景图像
1.html部分 <div class="hover right"> <i class="log_change state_psd">& ...
- VS Code中编写html(4) 标签的宽高颜色背景设置
1 <!+Tab键--> <!--有两个div标签时,分别设置style,有两种方法--> <div id="div1">第一个div标签:& ...
- VS Code中编写html(3) 标签的宽高颜色背景设置
1 创建一个div标签: <body> <div> 这是一个div标签: </div> </body> 变成了圆圆的,是因为后面有设置了样式: back ...
- background: url 背景图片加时间戳不显示图片
在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...
- background:url() 背景图不显示
奇怪的问题: .box-3 { width: 100%; height: 500px; border: solid 2px red; margin-top: 70px; padding: 0 0 0 ...
随机推荐
- 『HTML5实现人工智能』小游戏《井字棋》发布,据说IQ上200才能赢【算法&代码讲解+资源打包下载】
一,什么是TicTacToe(井字棋) 本游戏为在下用lufylegend开发的第二款小游戏.此游戏是大家想必大家小时候都玩过,因为玩它很简单,只需要一张草稿纸和一只笔就能开始游戏,所以广受儿童欢迎. ...
- vultr服务器上搭建PHP运行环境-centos7
安装nginx: yum install nginx 开启Nginx systemctl start nginx 访问你的域名或者ip 例如:quantaedu.com 安装PHP 查看系统版本lsb ...
- iOS学习之Objective-C 2.0 运行时系统编程
0 导言 本主主要内容包括: 1.概述2.参考3.运行时系统的版本和平台4.和运行时系统的交互5.消息6.动态方法解析7.消息转发8.类型编码9.属性声明 1 概述 Objective-C语言将决定尽 ...
- MySQL数据库--练习
学生选课系统 设计表关系 创建表和插入数据 /* Navicat MySQL Data Transfer Source Server : localhost_3306 Source Server Ve ...
- web.xml中配置spring配置(application.xml)文件
application.xml 一般放到WEB-INF下,当然,你也可以将它放到任意问题,但需要web.xml指向到该文件 1.application.xml配置 <?xml version=& ...
- Divide by Zero 2017 and Codeforces Round #399 (Div. 1 + Div. 2, combined) B. Code For 1
地址:http://codeforces.com/contest/768/problem/B 题目: B. Code For 1 time limit per test 2 seconds memor ...
- python3_pickle模块详解
python3 pickle持久化的储存数据. python程序运行中得到了一些字符串,列表,字典等数据,想要长久的保存下来,方便以后使用,而不是简单的放入内存中关机断电就丢失数据.python模块大 ...
- 【c++ primer, 5e】函数声明 & 分离式编译
p186~p188: 函数声明1.函数只能定义一次,但是可以声明多次. 2.函数的接口:返回类型 + 函数名 + 形参类型 3.为什么要在头文件中进行函数声明???在源文件中定义?暂时理解到,这么做可 ...
- qq第三方登录网站接口
网站如何实现QQ登录功能 | 浏览:11029 | 更新:2013-12-05 10:09 1 2 3 4 5 6 7 分步阅读 一键约师傅 百度师傅为你的电脑系统,选一个靠谱师傅! 如果想让网站实现 ...
- 【Error】安装程序无法打开注册表项 UNKNOWN\Components\...
在安装程序的时候出现错误信息: 解决方法: 依次点击开始,所有程序,附件,右键单击命令提示符,选择以管理员身份运行.运行secedit /configure /cfg %windir%\inf\def ...