css背景图与html插入img的区别

1.写在css里面的图片是以背景图形式存在的,而写在html里的是以标签形式存在的,在网页加载的过程中,以css背景图存在的图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的标签是网页结构(内容)的一部分会在加载结构的过程中加载。换句话讲,网页会先加载标签的内容,再加载背景图片,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,之后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。

2.通常是非内容的图片就写在css里面,如果是内容性的图片就写在html里面,打个比方,你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面,相框里面的内容照片就写在html里面。网页设计方向是表现层和内容层分离,css管表现,也就是显示效果,html管结构,内容结构的划分,这样代码要简洁易维护一些。

3.浏览器读取页面,css背景图和img图片都会下载到本地缓存文件夹。至于缓存多久,每个缓存文件有个标记的,浏览器会判断要不要向服务器重新发请求获取资源。至于这个标记是怎么样的,要看服务器上是怎么设置的。所以,css背景图和img图片在网页中都可以重复使用。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.写在css里面的图片是以背景图形式存在的,而写在html里的img是以标签形式存在的,在网页加载的过程中,以c...
    楚乔666阅读 5,071评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,660评论 25 709
  • 目标:种出理想的伴侣 感恩冥想: 1、感恩今天早上醒来妈妈给我做的早饭,妈妈知道我牙疼专门做了面条给我吃,谢谢妈妈...
    小兔兔姐姐爱吃胡萝卜阅读 921评论 0 0
  • 一瞬的回眸,掀动心的颤抖。 转脸的温柔,留住我的心房。 曾几时,久久凝视,以心相许。 曾几时,心心相通,沐浴爱河。...
    古月琳琳阅读 2,047评论 0 1