我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:css样式,如何设置背景图片距离右侧的距离? - backgroud-position-right
css样式,如何设置背景图片距离右侧的距离?(图4-1)

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

可能的方案

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

苏南大叔:css样式,如何设置背景图片距离右侧的距离? - background-position-x
css样式,如何设置背景图片距离右侧的距离?(图4-2)

通常来说

通常来说,这个属性就两个值,lefttop。例如:

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%

苏南大叔:css样式,如何设置背景图片距离右侧的距离? - backgroud-position-x-1
css样式,如何设置背景图片距离右侧的距离?(图4-3)

实际上:

  • 如果同时设置leftright的话,会导致整条失效。
  • 同时设置topbottom的话,也会导致整条失效。
  • 四个参数的话,那么解析为2组,前两个参数一组,后两个参数一组。这个时候就可以指定right或者bottom了。
  • 两个参数的话,默认第一个参数说的是left或者right,第二个参数说的是top或者bottom
注意:没有background-position-right,也没有background-position-bottom。有background-position-xbackground-position-y

最终答案

或者单独设置:background-position-xright xxx,或者联合设置background-positionright xxxbottom xxx

苏南大叔:css样式,如何设置背景图片距离右侧的距离? - backgroud-position-x-2
css样式,如何设置背景图片距离右侧的距离?(图4-4)

方案一:

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;

相关链接

总结

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css