目标是要实现下面类似的效果，图标在文字前面
将图片放到作为标签放到文字前面
结果就会出现图片和文字的对齐问题，当然，可以给图片加margin来调整对齐，但是这样做太复杂
将图片作为背景图
将图片作为背景图片，只要用到几个css属性，就可以轻松达到想要的效果
css
li{list-style: none;background-image: url('logo.png');background-size: 15px 15px;background-repeat: no-repeat;padding-left: 20px;}
效果
这个时候我们发现，诶！这不是也没对齐吗？这个时候就可以用到background-position属性到调整图片的位置了（建议使用Chrome浏览器的调试工具）
css
效果
这样就能完美实现了。
而且这些属性是可以写成一行的哦。
css
li{list-style: none;background: url(logo.png) no-repeat 0 4px/15px 15px;padding-left: 20px;}
效果是一样的。
如果觉得《background背景图片于文字排版小技巧——html css》对你有帮助，请点赞、收藏，并留下你的观点哦！
