Question

我正在尝试创建一个网站，其中可能存在多个流畅的背景部分，这些部分在移动设备，平板电脑和桌面设备（包括不同的分辨率）之间保持一致。背景是留在中心以覆盖整个区域，并在所有设备类型中以相同的比例显示。

我尝试过的事情是：background-position: cover拉伸但是会随着显示器宽度而缩放，从而导致图像移动。

创建了一个背景包装器，内部部件的固定宽度大约为1920像素。高度将是固定的。

此时效果最好的是具有指定宽度的包装内的背景。

HTML：

<div class="background-wrapper">
  <div class="background-inner"></div>
</div>

CSS：

.background-wrapper {
 left: 0px;
 top: 0px;
 width: 100%;
 height: 250px;
 display: block;
 overflow: hidden;
}

.background-inner {
 width: 1920px;
 left: 50%;
 margin-left: -960px;
 position: absolute;
 height: 250px;
 display: block;
 background-position: 50% 50%;
 background-size: cover;
}

有更有效的解决方法吗？

Answer 1

HTML：

<div class="background-inner">
</div>

CSS：

.background-inner {
    height: 250px;
    width:100%;
    display: table;
    background-position: 50%;
    background-image: url(https://psuk.s3.amazonaws.com/asset/p4/image/c3c59e5f8b3e9753913f4d435b53c308/Shaun/3040ce690fce2054c2011cf6d2f8b537.jpg);
    background-repeat: no-repeat;
}

https://jsfiddle.net/dy6ab36y/8/

Answer 2

背景尺寸cover仅在您想要拉伸background-image时才有用。如果你打算把它放在一个固定大小的容器中，无论如何都没有必要做你正在做的事情。最好的解决方案可能很简单，就是在非相对单位中定义background-size，例如px。

所以解决办法就是以这样的方式修正宽度：

.background-wrapper {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 250px;
    display: block;
    overflow: hidden;
    background-color:#ccc;
    background-image: url(https://psuk.s3.amazonaws.com/asset/p4/image/c3c59e5f8b3e9753913f4d435b53c308/Shaun/3040ce690fce2054c2011cf6d2f8b537.jpg);
    background-position: 50% 50%;
    /* By defining this, your image _will_ be cut off when the screen is
     * wider than 1920px, but since you don't want to stretch this would
     *  happen anyway. */
    background-size: 1920px auto;
}

<div class="background-wrapper">
</div>

Answer 3

您想要固定的图像高度还是总窗口高度的某个百分比？你想要拉伸背景图像吗？

如果没有，你可以使用

background-size: auto 100%;

CSS图像背景 - 跨不同设备的相同比例

3 个答案: