我正在组织一个雪碧,有两个问题.
我一直想知道是否有可能将背景图片正面或底部负面定位.负面的位置是元素或顶部左侧的面包和黄油的东西,但右边和底部呢？
如果我有一个500像素×500像素的div,那么我可以将背景图像的左边缘定位为从右边看5px,使用比495px更负的值来推动它吗？
第二个问题是我是否只能使用一小部分图像并重复它而不显示其余图像.
例如,我可能有一个300px正方形的精灵,并充满了各种各样的东西.是否可以拍摄该图像的50px平方部分并在元素的背景中重复它？
我非常怀疑要么是可能的,但必须让猴子入睡!
要"将背景图片负向定位到右侧或底部",您可以使用小于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;
至于你的第二个问题(重复图像的一部分),我不相信这是可能的,除非你要重复多个裁剪元素,这与你想要的不同.