background背景图片于文字排版小技巧——html，css

目标是要实现下面类似的效果，图标在文字前面

将图片放到作为标签放到文字前面

结果就会出现图片和文字的对齐问题，当然，可以给图片加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;
    }

效果是一样的。