CSS3的背景大小和背景位置问题

我正在编程一个小小的WP主题，需要一些帮助，使用新的CSS3背景大小属性。CSS3的背景大小和背景位置问题

我有一个包含图像作为背景的DIV。图像本身被设置为比div更大，以呈现原始图像的一点点切除：

.imageContainer { 
    background-size:154% 102%; 
    background-position-x:-28%; 
    background-position-y:0.28%; 
}

到目前为止一切都很好。但如果大小≥100％，则调用background-position属性会变得棘手。我放在一起一点点JS/CSS游乐场来进行测试：

如果图像宽≤99％，较少的背景位置-X是指图像会离开。
如果图像的宽度是100％，background-position-x将不做任何处理
如果图像宽度≥101％，则较少的background-position-x表示图像正确。

对于我计算下面的情况：

大容器：350x350px
图片：540x359px
方式：（三百五分之一百）* 540 154≙％的宽度
（100/350）* 359≙102％身高。
另外：位置X：-28％和位置Y：（含自动计算）-0.28％

所以我有一个页面渲染和大小有关的权利的大小。但正如我所说，较少的background-position-x（-28％）表示图像正确，图像位置错误。

它将不得不左移，因为我计算了-28％“左边距”。所以我做了一些试验和错误，事实证明正确的位置将在50％左右。

这仍然是一个CSS3问题，或者它是我对这个属性的功能的完全误解？

编辑：here is an JSFiddle too

这是说明我的目标图片... enter image description here

来源

2013-02-23 Julian F. Weinert

如果你能放在一起http://jsfiddle.net演示该问题，链接到真实图像，将使它更容易让我们来帮助你。同样对于记录“background-position：0 0”是有效的语法。 'background-postion-x'和'background-postion-y'实际上并不是W3C规范的一部分，并且在Firefox或Opera中不受支持。 – tw16 2013-02-23 18:09:19

你是正确的关于background-position-x/y。我认为这样阅读会更容易。我正在开发Safari，所以它会工作。但是当我上线时我会删除这个语法。所以这是一种生产状态:)我会在几分钟内把小提琴放在一起。 – 2013-02-23 18:21:02

你去那里http://jsfiddle.net/FJ3Ub/ – 2013-02-23 18:33:21

你的问题的关键是，你指定百分比给出的地步容器和图像比赛。这一点是在图像和容器中计算出来的。

所以，如果你想图像居中，这意味着图像的中心位于容器的中心。所以，这是你通过反复试验找到的价值。

这里的关键是50％的背景位置总是得到图像居中，并且如果该属性指定10％，你不需要任何的计算

，那将意味着，指向图像左侧10％的点位于容器左侧10％的位置。

公式来进行

如何从百分比转换为像素（的要求）。假设您有一个容器大小为n并且图片大于f您指定的背景位置为x％。我们以此为式因子一个为一个= X * 100

位置在容器匹配是一个。在图像中匹配的位置是afn。来自容器的图像的位置是差异，其可以作为和（f-1）给出。

这就解释了为什么：

˚F> 1时的特性的表观结果反转。（图像比容器大。F = 1（图像是比同尺寸的容器）

现在将其转换成空间的百分比时

结果是零，你只要按大小划分所述容器（ñ），得到

一个（F-1）

或由图像（FN）的大小除以得到

一（F-1）/ F

来源

2013-02-23 19:39:14 vals

所以多数民众赞成在关于这个属性的事情，我没有找到记录。这有点奇怪，似乎没有被充分考虑......但我们需要使用它，因为它:)所以你可以给我一个提示如何将这个**匹配**百分比转换为* *空间**百分比？和：px的行为是一样的吗？ – 2013-02-24 05:42:26

我想这是属性关键字的扩展。当您指定中心时，您将图像的中心定位在容器的中心。当你指定正确的时候，你正在将图像的右边放在容器的右边......绝对值（px或其他）的工作方式，你会期望他们:-)我会尽力给你你提出的公式 – vals 2013-02-24 08:37:41

我认为** a = x/100 **或** x = a/100 **。 – Mohsenme 2016-06-20 11:24:15

CSS3的背景大小和背景位置问题

回答

相关问题