首页 文章

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

提问于
浏览
4

我正在编写一个WP主题,需要一些新的CSS3 background-size属性的帮助 .

我有一个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%,背景位置x越小意味着图像向右移动 .

对于以下情况,我计算了:

  • 大容器:350x350px

  • 图片:540x359px

  • 表示:(100/350)* 540≙154%宽度

  • (100/350)* 359≙102%高度 .

  • 另外:position-x:-28%和position-y:-0.28%

所以我渲染了一个页面(包括自动计算),尺寸大小合适 . 但正如我所说,较少的背景位置-x(-28%)意味着图像正确,图像的位置错误 .

它必须向左移动,因为我计算了-28%“左边距” . 所以我做了一些试验和错误,结果发现正确的位置将达到50%左右 .

这仍然是一个CSS3问题,还是我完全误解了这个属性的功能?

EDIT: here is an JSFiddle too

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

1 回答

  • 4

    问题的关键在于您指定的百分比给出了容器和图像的位置 match . 此点在图像和容器中计算 .

    因此,如果您希望图像居中,则意味着图像的中心位于容器的中心 . 所以,这是通过反复试验找到的 Value .

    这里的关键是50%,因为背景位置 always 使图像居中,并且您不需要任何计算

    如果为属性指定10%,则意味着图像左侧10%处的点位于容器左侧10%处 .

    formula for this

    如何从百分比转换为px(根据要求) . 假设您有一个大小为 n 的容器,并且图像的大小为 f 您指定的背景位置为 x % . 我们认为这是一个统一因素 aa=x*100

    容器中匹配的位置是 an . 要在图像中匹配的位置是 afn . 来自容器的图像位置是差异, afn-an ,可以 an(f-1) 给出 .

    这解释了原因:

    当f> 1时,属性的表观结果是反转的 . (图像比容器大 .

    当f = 1时,结果为nil(图像大小与容器相同)

    现在要将其转换为空间百分比,您只需要除以容器的大小( n )即可

    a(f-1)

    或除以图像的大小 (fn)

    a(f-1)/f

相关问题