css学习笔记3--灵活的背景定位

(1) background-position方案

我们可以利用这一属性指定背景图片距离任意角的偏移量。

div {width: 30em;height: 15em;background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat right bottom #5378d4;background-position: right 50px bottom 15px;} 复制代码

(2) background-origin方案

默认情况下，background-position 是以padding box 为准的，这样边框才不会遮住背景图片。因此，top left 默认指的是padding box 的左上角。

而属性background-origin能够改变这种行为，它的值有三种：border-box/padding-box/content-box。默认情况下，它的值是padding-box。我们使用content-box就可以实现想要的效果了。

盒模型如图：

div {width: 30em;height: 15em;background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat right bottom #5378d4;background-origin: content-box;padding: 20px;} 复制代码

实现的效果同方案（1）

(3) calc()方案

div {width: 30em;height: 15em;background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat right bottom #5378d4;background-position: calc(100% - 20px) calc(100% - 10px);} 复制代码

注意：calc()函数内部的运算符两侧要加上一个空白符。

转载于:https://juejin.im/post/5c6ce96d6fb9a049e063eb2b

总结

以上是生活随笔为你收集整理的css学习笔记3--灵活的背景定位的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。