css样式，如何设置背景图片距离右侧或下方的距离？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本篇依然是一篇非常基础的文章，css高手依然请飘过。这里说一个看起来很容易，但是事实上稍稍费脑的需求：设置背景图片距离右侧的距离。

本文测试环境：win10，chrome@96.0.4664.45。基本需求：设置背景图片距离右侧的距离。扩展需求：设置背景图片距离底部的距离。

可能的方案

对于本文中的需求，实际上是个设置背景图片的background-position属性的问题。

通常来说

通常来说，这个属性就两个值，left和top。例如：

background-position:20% 10%;

等同于：

background-position:left 20% top 10%

这个意思就是，距离左侧20%，距离顶部10%。

本需求来说

综述，本文中设置背景图片的右侧距离的话(或者距离底部的距离的话)，需要的代码是：

background-position:right 20% bottom 20%;

或者：

background-position-x:right 20%;
background-position-y:bottom 20%;

注意不能设置left，如果写成right 20%的话，语义上这个效果是：靠右对齐，同时距离底部是20%，而不是需求的距离右侧20%。

实际上：

• 如果同时设置left和right的话，会导致整条失效。
• 同时设置top和bottom的话，也会导致整条失效。
• 四个参数的话，那么解析为2组，前两个参数一组，后两个参数一组。这个时候就可以指定right或者bottom了。
• 两个参数的话，默认第一个参数说的是left或者right，第二个参数说的是top或者bottom。

注意：没有background-position-right，也没有background-position-bottom。有background-position-x和background-position-y。

最终答案

或者单独设置：background-position-x的right xxx，或者联合设置background-position的right xxx和bottom xxx。

方案一：

background-color: #f0f0f0;
background-image: url(bg.png);
background-repeat: no-repeat;
background-position: right 10% bottom 10%;

方案二：

background-color: #f0f0f0;
background-image: url(bg.png);
background-repeat: no-repeat;
background-position-x: right 10%;
background-position-y: bottom 10%;

方案三：

background: url("bg.png") right 10% bottom 10% no-repeat #f0f0f0;

相关链接

• https://newsn.net/say/html-img-space.html
• https://newsn.net/say/css-flex-axis.html
• https://newsn.net/say/flex-box-align.html

总结

虽然大多数情况下，都是设置背景图片距离左侧或者顶部的距离，但是也可以设置到右侧或者底部的距离。
更多css相关文章，请关注苏南大叔的博客：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。