background-position也许你没考虑到

Posted 2020-08-04

设置背景图片时不知你有没有遇到过背景位置的困扰，有没有深入思考过，background-position到底是什么，下面请各位看看我的理解。

简而言之就一句话，默认图片左上角居元素左上角的坐标，例如：

假设我有一元素高度是30px，有一张这个复选框的背景图，如果我设置background-position:0 0;我们都知道这张图片出现在元素的左上角，而且未被选中的部分显示出来，如果我设置为（0 -30px），选中样式的图片显示出来。

我现在有另一图片距离元素右侧5px，底部10px，如何设置背景图的position呢？

其实background-position可以指定上下左右的位置的，例如：

background-position:right 5px bottom 0;

第一次写博客，不太会措辞，如果你有异议或没理解可以评价，看到之后我会第一时间回复