可以將背景圖像負向定位到底部或右側，還是僅重複一部分圖像？

Question

我正在組建一個精靈並且有兩個問題。

我總是想知道是否有可能將背景圖片定位在右側或底部。消極的立場是元素或頂部左邊的麪包和黃油東西，但右邊和底部呢？

如果我有一個500像素的500像素div，然後我可以將背景圖像的左邊緣定位爲從右邊看5像素，使用負值超過495像素將它推過來？

第二個問題是我是否可以只使用圖像的一小部分，然後在沒有顯示其餘圖像的情況下重複使用它。

例如，我可能有一個精靈，300像素的正方形，充滿了各種各樣的東西。是否有可能將該圖像的一個50像素的正方形部分並在元素的背景中重複？

我非常懷疑任何一種都是可能的，但必須讓猴子入睡！

Answer 1

對於你的第一個問題，不，你不能。

對於第二個問題，不，你不能。

Answer 2

的background-position酒店有幾個不同的值：

left top 
left center 
left bottom 
right top 
right center 
right bottom 
center top 
center center 
center bottom 

您也可以指定X和Y位置吧。有關它的更多信息，看看這個鏈接：

https://developer.mozilla.org/docs/CSS/background-position

關於你的第二個問題，即使用簡單的CSS是不可能的。

Answer 3

如果您使用基於百分比的背景位置，您可以。所以，你想是這樣的：

background-position: 190% 0; 

Answer 4

他們已經回答，你不能使用負值，但也許你可以嘗試：

使元素background-position:right bottom 和背景圖像應只有你想要展示的部分。

Answer 5

要將「背景圖片負向定位到右側或底部」，可以使用小於0％的百分比。例如：

background-position: -11% -7%; 

...如果圖像與元素大小相似，則將圖像裁剪放置在右下角。如果尺寸不一樣，您可能需要更多的負面百分比。

要將「背景圖片負面定位到左側或頂部」，可以使用大於100％的百分比。例如：

background-position: 105% 110%; 

...將圖像裁剪放置在頂部和左側，再次假定它們具有相似的尺寸。如果尺寸不一樣，您可能需要更大的百分比。

然而，找到確切的百分比並不是很直觀。 CSS使用百分比與background-position略有不同。該值是沿圖像和元素（也稱爲視口）的百分比，它們是相同的。這就是爲什麼0%等於left,50%等於center，而100%等於right。在此範圍之外，它更不直觀，因爲「小於零」匹配圖像和元素上的上/左邊緣之前的點（有效地將圖像遠離從上/左移動），並且「大於100％「匹配大於遠底部/右邊緣的點，其具有從底部/右側移動圖像遠離的效果。

這些公式有助於確定圖像的位置。簡單的代數將爲你提供你想知道的變量（例如，解決百分比問題）。

effectiveLeft = (elementWidth - imageWidth) * percentageLeft; 
effectiveTop = (elementHeight - imageHeight) * percentageTop; 

至於你的第二個問題（重複圖像的一部分），我不相信這是可能的，除非你是重複複種元素，這比你在想什麼不同。

Answer 6

對於負右下角位置工作的權利，這DIV必然是財產background-repeat: no-repeat;