(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--灵活的背景定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。