Question

我希望有一个固定位置的背景图像可以缩放，我需要它有220px的上边距和170px的右边距，这样图像就不在导航栏下面了。我已接近以下代码，但正确的保证金因百分比而异。

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

感谢您的帮助！

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

Answer 2

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

我会考虑两个选项：

使用基本单位在身体上为所有尺寸，边距，布丁等重做ems中的整个布局。这样你可能有更多机会排队。（实质上我说的是从ems开始，在ems中放大，因为％age不起作用）
您也可以从像素开始并以像素为单位进行放大，但您需要使用JavaScript进行计算并将新边距应用于onResize。

使用顶部和右边距在CSS中定位固定背景图像

2 个答案: