CSS3背景大小和背景位置问题 [英] CSS3 background-size and background-position issue

问题描述

我编程一个WP主题，需要一点帮助新的CSS3背景大小的属性。

I'm programming a little WP theme and need a little help with the new CSS3 background-size property.

我有一个DIV包含一个图像作为背景。图片本身设置为大于div，以显示原始图片的一小部分：

I have a DIV which contains an image as background. The image itself is set bigger than the div to present a little cut-out of the original image:

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

到目前为止一切都很好。但是如果大小≥100％，调用background-position属性会变得棘手。
我把一个小的JS / CSS Playground放在一起测试：

So far everything is fine. But invoking the background-position property gets tricky if the size is ≥ 100%. I put together a little JS/CSS Playground for testing:

• 如果图像宽度≤99％


• 如果图片是== 100％宽，background-position-x不执行任何操作。

对于以下情况，我计算：

For the following case I calculated:

• 大容器：350x350px


• 图片：540x359px


• 平均：（100/350）* 540≙154％宽度


• （100/350）* 359≙102％身高。


• -x：-28％and position-y：-0.28％

• Big container: 350x350px
• Image: 540x359px
• Means: (100/350) * 540 ≙ 154% width
• (100/350) * 359 ≙ 102% height.
• Also: position-x: -28% and position-y: -0.28%

所以我渲染了一个页面（包括自动计算）尺寸大约是正确的大小。
但正如我所说，background-position-x（-28％）意味着图像向右移动，图像位置错误。

So I rendered a page (incl. automatic calculations) and the size is about the right size. But as I said, less background-position-x (-28%) means the image goes right, the image has the wrong position.

必须向左移动，因为我计算了-28％左边距。所以我做了一点试验和错误，结果是，正确的位置将在大约50％。

It would have to be moved left, because I calculated -28% "left margin". So I did a bit trial and error and it turned out that the right position would be at something around 50%.

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

Is this still an CSS3 issue, or is it my complete misunderstanding of the functionality of this property?

EDIT： 这里是一个JSFiddle也

here is an JSFiddle too

这是一个图片来说明我的目标...

Here is a picture to illustrate my target…

推荐答案

你的问题是，你指定的百分比给出了容器和图像匹配的点。这一点是在图像和容器中计算的。

The key to your problems is that percentage that you specify gives the point where the container and the image match. This point is calculated both in the image and in the container.

所以，如果你想要图像居中，这意味着图像的中心在容器。

So, if you want the image centered, that means that the center of the image is in the center of the container. So, this is the value that you find by trial and error.

这里的关键是50％作为背景位置总是获取图片

The key here is 50% as background-position always gets the image centered, and you don't need any of your calculations

如果您为属性指定了10％，那么这意味着该点距离图片位于容器左侧10％的位置。

If you specify 10% for the property, that would mean that the point at 10% from the left in the image is positioned at the point at 10% from the left in the container.

此公式

如何从百分比转换为px（按要求）。
假设您的容器大小为 n ，且图片大于 f 。您指定的背景位置为 x 强>％。我们将此视为单一因素 a 为 a = x * 100

How to convert from percentage to px (as requested). Lets say that you have a container o size n and the image is greater by a factor of f You specify a background position of x%. We take this as an unitary factor a being a=x*100

是 。图片中匹配的位置为 afn 。图片从容器的位置是 afn-an 的差异，可以以（f-1）的形式给出。

The position to match in the container is an. The position to match in the image is afn. The position of the image from the container is the difference, afn-an , that can be given as an(f-1).

这解释了为什么：

当f> 1时，属性的显而易见的结果是反转的。 （图片大于容器）

The apparent result of the property is inverted when f > 1 . (the image is bigger than the container.

当f = 1时，结果为nil（图片大小与容器相同）

The result is nil when f = 1 (the image is the same size than the container)

现在将它转换为空格百分比，你只需要除以容器大小（ n ）即可得到

Now to convert that to space percentage, you just divide by the size of the container (n) to give

a（f-1）

或除以图片大小（fn）

a（f-1）/ f

这篇关于CSS3背景大小和背景位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！