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

本文介绍了CSS3背景大小和背景位置问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我编程一个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…

calculated

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

问题描述

推荐答案