Question

图片插入在css与html的区别

我有个模板，是外部链接css文件的，我看见有的图片插入写在css里面，有的就插入在html里面，那么想问几个问题：
1.二者有何区别？
2.什么图片插入在css，什么图片插入在html里面？
3.不知道怎样问了，扩展点说就更好。

Answer 1

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

Q2.什么图片插入在css，什么图片插入在html里面？
A2.如果是装饰性的图片就写在css里面，如果是内容性的图片就写在html里面，
打个比方，你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面，相框里面的内容照片就写在html里面。
Q3.不知道怎样问了，扩展点说就更好。
A3.以后的网页设计方向是表现层和内容层分离，css管表现，也就是显示效果，html管结构，内容结构的划分，这样代码要简洁易维护一些。关于其他回答中的“像<img />这种属于表现层的东西都会被丢弃的”这种说法是不正确的，内容中的图片还是要使用<img>图标而不是css背景来引入。而“css图片可以复用，<img>图片不能复用”这种说法也不正确，网页加载过程中相同的图片会下载一次并保存在缓存里面，其他地方的<img>使用了同样的图片是不会再去下载的。<img>图片也可以复用。

Answer 2

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

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

Answer 3

CSS里面只能写背景图片。

Answer 4

1.关于区别
其实效果都是一样的，只是说如果放在封装好的css文件里面的话，后期维护起来更加方便，当然，也是建议这样做的

2.什么图片插入在css，什么图片插入在html里面？
我们都知道html中有一个标签叫做<img />，目前这个标签是专门用来插入图片的，它有个src属性，就是图片的路径
而一般在css中声明的图片都是包含在background属性中，而且一般都是为<div></div>之类的标签添加背景图片

3.其实，html完全可以舍弃<img />标签，因为css可以为html中的任何元素定义背景图片，但是毕竟现在html还在向xml过渡，我想在以后版本的xhml中，像<img />这种属于表现层的东西都会被丢弃的

没怎么组织语言，希望以上回答对你有帮助~