可以将背景图像负向定位到底部或右侧，还是仅重复一部分图像？

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;