3

I want to have a fixed position background image that scales and I need it to have a 220px top margin and a 170px right margin so that the image is not under the navigation bars. I have come close with the following code but the right margin varies due to the percent.

#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%;
}

Thanks for any help!

4

2 回答 2

4

您可以使用 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;
}
于 2012-06-14T06:16:20.147 回答
0

所以从它的 170px 右边距开始，然后是你描述的百分比。

我会考虑2个选项：

  1. 在 ems 中重做所有尺寸、边距、布丁等的整个布局，并在主体上使用基本单元。这样，您可能有更多的机会排队。（本质上我是说从 ems 开始，在 ems 中扩大规模，因为 %age 不起作用）

  2. 您也可以从像素开始并以像素为单位放大，但您需要 JavaScript 来进行计算并在 onResize 上应用新的边距。

于 2012-06-14T06:17:00.753 回答