css - 背景图像是否可以负向定位在底部或右侧，或者只重复图片的一部分？

Question

我正在组装一个 sprite，有两个问题。

我一直想知道是否可能将背景图片消极定位到右侧或底部。否定位置是元素左侧或顶部的面包和黄油，但右侧和底部呢？

如果我有一个 500px x 500px 的 div，我可以使用一个比 495px 更小的负值将背景图像的左边缘定位为距右侧 5px 的位置吗？

第二个问题是我是否可以只使用图像的一小部分并在不显示图像的其余部分的情况下重复它。

例如，我可能有一个 300 像素正方形的 Sprite ，里面装满了各种东西。是否可以取该图像的 50 像素正方形部分并在元素的背景中重复它？

我非常怀疑这两者是否可行，但必须让猴子休眠!

Answer 1

要“将背景图片负定位到右侧或底部”，可以使用小于 0% 的百分比。例如:

background-position: -11% -7%;

...如果图像与元素的大小相似，则将裁剪后的图像定位在右下角。如果它们的大小不同，您可能需要更多的负百分比。

要“将背景图片负面定位到左侧或顶部”，您可以使用大于 100% 的百分比。例如:

background-position: 105% 110%;

...将裁剪后的图像定位在顶部和左侧，再次假设它们的尺寸相似。如果它们的大小不同，您可能需要更大的百分比。

但是，找到您需要的确切百分比并不是很直观。 CSS 使用百分比与 background-position 略有不同。该值是图像和元素(又名视口(viewport))相同的百分比。这就是为什么 0% 等于 left，50% 等于 center，以及 100 % 等于 right。在这个范围之外，它甚至更不直观，因为“小于零”匹配图像和元素上/左边缘之前的一个点(有效地将图像从上/左移远离) , 而“大于 100%”匹配一个大于最底部/右侧边缘的点，它具有将图像从底部/右侧远离的效果。

这些等式有助于确定您希望图像放置的位置。简单的代数将为您提供您想知道的变量(例如，求解百分比)。

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

关于你的第二个问题(重复图像的一部分)，我认为这是不可能的，除非你重复多个裁剪元素，这与你想要的不同。