怎么在css中插入图片

html-css010

怎么在css中插入图片,第1张

css插入图片方法如下：

操作设备：戴尔笔记本电脑

操作系统：win10

操作程序：html编辑器v8.21

1、打开html编辑器并创建一个新的html文件。

2、新建完一个新的html文件后，在index.html的<style>标签中，输入如下所示的CSS代码。

3、输入完CSS代码之后，接下来运行index.html页面，可以发现，本地图片通过背景图片衜中的本地路径成功调用为了背景图片，图片就成功加入了。

这种做法叫做css精灵，CSS Sprites，或者集合图片法。

原理：

原理就是把所有图片（前提是图片较小）都集合在一张图中，然后利用css样式中的background-position属性来准确定位到位置。

优点：

可以减少http请求，提高性能，本来四张图片要请求四次，现在一次搞定。

缺点：

就是处理起来比较麻烦，需要改动其中一个就要改整个图。

需要用ps先定位好每个图片的位置。

对html容器也有较高的要求，宽高都对背景会有依赖。

所以建议在比较稳定的页面，不需要经常改动的地方用css精灵的方法，如果需求经常变动，我觉得直接用单图也可以。