目标是要实现下面类似的效果,图标在文字前面
将图片放到作为标签放到文字前面
结果就会出现图片和文字的对齐问题,当然,可以给图片加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》对你有帮助,请点赞、收藏,并留下你的观点哦!