html插入背景图片和div,HTML直接插入图片和css使用背景图片区别

刚刚接触前端重构的小伙伴或许会遇到一个问题，网页中的图片是做背景(写在CSS中)好呢，还是写在HTML标签中好呢？其实呢不同的场景、不同的项目需求下，选择都会不一样。我们先来分析一下网友的一些结论，并适当吐槽下。

1.使用有一个好处是，用户可以很方便的右键保存或者复制图片的链接。

2.图片做为背景，在图片没加载的时候或者加载失败的时候，不会有个图片的占位标记，不会出现红叉。

PS：一般图片下载站会希望访客、用户去下载站内的图片，一般的企业或者站长其实并不希望同行或者竞争对手下载并盗用网站上的图片。第二点出现红叉应该是古老的IE浏览器才会出现，而且随着宽带网速的提升，这种情况并不多见。

3、在网页加载的过程中，以css背景图存在的图片会等到结构加载完成(网页的内容全部显示以后)才开始加载，而html中的标签是网页结构(内容)的一部分会在

加载结构的过程中加载，换句话讲，网页会先加载标签的内容，再加载背景图片，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，之后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。这算比较大的区别之一。

4.如果是装饰性的图片就写在css里面，如果是内容性的图片就写在html里面。打个比方，你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面，相框里面的内容照片就写在html里面。

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

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

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

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

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

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

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

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

2、当图像代替文本使用时使用backgrond-image(避免出现无语义化标签)。

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

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

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

html插入背景图片和div,HTML直接插入图片和css使用背景图片区别相关推荐

php背景图片平铺拉伸,利用jQuery和CSS将背景图片拉伸
现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果.本文将带您一起 ...
html设置div页面最底,使用css让大图片不超过网页宽度
让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度! 接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问 ...
css的背景图片不显示,wepback打包时，css的背景图片显示不出来，求教！
如题.项目环境使用 webpack 构建的,webpack 这块配置的相关代码是 module: { loaders: [ { test: /\.(js|jsx)$/, exclude: /node_ ...
css中图片在div中的位置,纯CSS实现任意图片在div中垂直居中
在苦逼的前端领域,相信许多CSS新手都遇到过图片垂直居中的问题,今天我们就来分享一种实现图片垂直居中的CSS方法. 话不多说,先直接贴上代码: div{ border:1px solid #ccc; ...
html背景图片语法,下列哪一项是css添加背景图片的正确语法构成？（）
摘要: 下端向下内侧突起称内,下列项形成内侧膨大外侧上端.正确学习响经济因主要是因素缺乏部原动机的内的影.穴的揉外功效劳宫是(,语法陷B邪.和胃痛.体D中止壮身正祛健脾阳举气血.强补益温经.理.扶散寒 ...
html图片的宽度和高度设置,CSS设置img图片的宽度和高度
如何使用CSS控制HTML中图片高度宽度,统一对象内图片高度宽度等样式属性? 我们在布局图片列表时,通常我们要控制img图片的高度和宽度这样来达到图片统一. 如以下这个的图片列表布局示图图片img高 ...
css图片居中不好,厉害了我的哥,css图片居中原来有这么多种方法
图片的居中显示 css 有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,比如一般设置图片属性 text-align:center 水平居中,但这个方法经常无效,很多前端工程师都有研 ...
背景图以拉伸方式（不重复）填充背景
今天要解决一个用背景图以拉伸方式(不重复)填充背景的问题. 看了<用CSS把背景图片拉伸>和<css 如何让背景图片拉伸填充避免重复显示>后用background-repeat ...
php图片滑动的属性,使用css怎么实现图片的滑动效果？（示例）
本篇文章主要给大家介绍关于css实现图片的滑动效果示例,希望大家阅读完本篇后对css滑动效果的相关知识有所了解. 下面给大家举一个简单的css图片滑动效果示例(自下而上滑动): css怎么实现图片滑动 ...

html插入背景图片和div,HTML直接插入图片和css使用背景图片区别

html插入背景图片和div,HTML直接插入图片和css使用背景图片区别相关推荐

最新文章

热门文章