在CSS中定位带有上边距和右边距的固定背景图像

Question

我希望有一个固定位置的背景图片，它能够缩放，并且顶部和右侧分别有220像素和170像素的边距，这样图片就不会在导航栏下面。我使用了以下代码，但是由于百分比的原因，右边距会有所变化。

#container_hu
{
width: 100%;
text-align: left;
background: #fff;
border: 0px solid #000000;
height:100%;
padding-top:260px;
min-width:1100px;
background:url(../images/bg_image.jpg) no-repeat;
background-attachment:fixed;
background-position: 78%  220px;
background-size:25%;
}

谢谢你的帮助！

- zucchini

Answer 1

您可以使用CSS3的background-clip属性来强制裁剪背景以适应允许的内容区域。也就是说，您可以为DIV指定填充（以覆盖导航栏等），并将background-clip属性指定为content-box以实现此目的。以下是示例CSS：

#container_hu {

    /* this forces the bg to be rendered only within allowed content area (CSS3) */
    background-clip: content-box;
    background-image: url("your_image.jpg");
    background-repeat: no-repeat;

    /* this forces the bg to stretch with the container (CSS3) */
    background-size: 100% 100%;

    height: 300px;
    width: 400px;

    /* specify the top/left pixels to cover your nav-bar etc. */
    padding-left: 50px;
    padding-top: 50px;
}

- techfoobar

---

不支持IE8及以下版本。FYI - Moin Zaman

是的。background-clip 只适用于 CSS3，因此在 IE8 及以下版本中无法使用。由于您的问题已经提到了 background-size（它是 CSS3 并且在 IE8 及以下版本中不起作用），我认为您可以接受仅基于 CSS3 的解决方案。 - techfoobar

我对此的另一个问题是背景不随滚动而移动。 - Fiddle Freak

Answer 2

首先是170像素的右边距，然后是你所描述的百分比。

我考虑了两个选项：

1. 重新使用ems为所有尺寸、边距、填充等重做整个布局，并在body上设置基本单位。这样你可能有更多的机会让事情排列整齐。(实质上我是说从ems开始，以ems为单位进行缩放，因为百分比不起作用)

2. 你也可以从像素开始，然后逐渐增加像素，但你需要JavaScript来计算并在onResize时应用新的右边距。

- Moin Zaman