Question

如何制作背景img：

横向拉伸窗户
有一个固定的高度
大于内容高度时的裁剪高度（不缩小）

目前我有这个实现＃1和＃2的代码，但我似乎无法做到＃3：

<img class="background" src="images/page-background.png"/>

html {
    position: relative;
}

.background {
    width: 100%;
    height: 2800px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

我尝试使用img将div移到overflow: hidden内但由于某种原因无效：

<div class="background-wrap">
    <img class="background" src="images/page-background.png"/>
</div>

.background-wrap {
    position: absolute;
    width: 100%;
    height: 1000px;
    overflow: hidden;
    z-index: -1;
}

你如何在CSS / HTML（没有JavaScript）中正确地做到这一点？

Answer 1

您可以在div上使用css背景图像，如下所示：

.background-wrap {
 background: url(images/page-background.png) no-repeat;
 background-size: 100% 500px;
}

指定背景大小; 在窗口水平拉伸100％，并具有500px固定高度（如果您希望图像高度与宽度成比例，则将其更改为自动）。

Answer 2

对不起家伙，事实证明我完全忘记删除我在多个文件中拆分HTML后留下的重复背景<img>（实际上是PHP文件，但这无关紧要）。

为了将来参考，以下内容对我有用：

<html>
    <head>...</head>
    <body>
       <div class="background-wrap">
           <img class="background" src="images/page-background.png"/>
       </div>
    </body>
</html>

html {
    position: relative;
}

.background-wrap {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
}

.background {
    width: 100%;
    height: 2800px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

拉伸背景图像宽度，但裁剪高度

2 个答案: