css 将背景图像放大到超出 div 大小

Question

我正在尝试获得background-attachment:fixed 效果，如this article from Chris Coyer。

jsFiddle Example with my code

我的目标是让这个效果响应，但我担心的是指定的大小依赖于 px 大小，它没有响应。

因此，我使用两个“窗口化”图像创建了以下示例：WD2 和 WD4。第二个（WD4）显示了所需的效果，但它依赖于 px 大小。因此，我试图让第一个（WD2）扩大其背景图像以创建与 WD4 中相同的效果。

由于 placekitten 提供 px 大小的图像，我从较小的图像开始并尝试将其放大以适合所需的大小。 尝试“增长”较小的图像是我的测试方法 - 我不致力于这个例子。如果有人可以创建更好的测试/示例，请这样做。

HTML：

<div id="wd1"></div>
<div id="wd2">
    <div id="d2"></div>  <--- small image. Cannot expand and get desired effect
</div>
<!-- --------------------------------------------- -->
<div id="wd3"></div>
<div id="wd4">
    <div id="d4"></div>   <--- Large image - Works! But need to grow a small image
</div>
<div id="wd5"></div>

CSS：

#wd1{width:100%;height:400px;background:red;}
#wd2{width:100%;height:200px;background:url(http://placekitten.com/98/48) 100% 300% no-repeat;}
    #d2 {width:100%;height:200px;}
#wd3{width:100%;height:800px;background:green;}
#wd4{width:100%;height:200px;background:url(http://placekitten.com/798/501) no-repeat fixed;}
    #d4 {width:100%;height:200px;}
#wd5{width:100%;height:500px;background:green;}

我发现了这两个 SO 问题，但我不知道如何使用它们来使我的示例工作：

Can background image extend beyond div's borders?

Stretch and scale a CSS image in the background - with CSS only

Answer 1

可能只是 background-size: contains; ?

#wd2{width:100%;height:200px;
    background:url(http://placekitten.com/98/48)  no-repeat fixed;
    background-size: contain;
}

fiddle

你有的可能性：

contain 将调整图像的大小，使其在不被剪切的情况下达到最大的可能大小。这意味着您可以看到所有图像，但可能会在一个方向或另一个方向留下空白

cover 将调整图像以不留下任何空白。但会剪切图像的某些部分，随着图像和容器 div 之间的纵横比差异越大，将剪切更多部分。

在你的网站上，我会使用

background-size: cover;
background-position: center; 

但这是个人决定：玩它。 （或者你可以让div更高，这样长宽比和图片更相似）