twitter.com的缩放背景图像是如何实现的？

Question

twitter.com有一个很好的缩放背景图像实现。

这是如何实施的？它是否使用我自己可以使用的库/工具？

让我看到这一点的原因是我正在寻找一种适用于旧浏览器的解决方案，并且很容易实现轻量级要求。

Answer 1

我为你创造了一个与Twitter页面相同的小提琴。

为了纠正上面的Talasan，您需要从代码中删除。

display:none;

为了更清楚你的问题。 Twitter不使用任何库或工具来实现这一目标。他们正在做的是在屏幕中央设置一个固定位置的图像。 为什么在调整浏览器窗口大小时图像不会调整大小？ 他们使用高分辨率图像，并将其调整为200％的宽度和高度。这样，几乎所有分辨率下的图像看起来都是一样的，只会在非常小的分辨率上发生变化。

<强> Example

另外，为了澄清这一点，Twitter的背景图片不能扩展。无论您的浏览器的分辨率如何，它看起来都是一样的，但由于它们使用它们的方式，您会发现它实际上正在缩放。 见下图。

实际图像尺寸

1920 x 1018

1024 x 600

320 x 480（iPhone）

Answer 2

我不确定他们为什么这样做，但是他们在包含图片的div上使用fixed位置：

.front-bg {
    background: #000000;
    height: 200%;
    left: -50%;
    position: fixed;
    width: 200%;
}

然后在图像上，他们强迫它“适合”：

.front-bg img {
    bottom: 0;
    display: none;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
    right: 0;
    top: 0;
}

但是，您应该只使用background-size属性：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size