Question

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

我的目标是使这种效果具有响应性，但我担心的是指定的尺寸依赖于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

可能只是背景大小：包含; ？

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

fiddle

你拥有的可能性：

包含会调整图片的大小，因此它是最大的尺寸，无需切割。这意味着您可以看到所有图像，但可能会将空白留在一个方向或另一个方向

封面会调整图片，不留任何空白。但是会切割图像的某些部分，并且会切割更多图像，因为图像和容器div之间的宽高比差异会更大。

在您的网站中，我会使用

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

但这是个人决定：玩它。（或者你可以使div更高，所以宽高比更像图像）

css放大div大小以外的背景图像

1 个答案: