基于网格的CSS：如何处理网格外的背景图像

Question

当您尝试使用网格系统（例如960或蓝图或YUI）并且设计包含的背景图像明显不符合列或排水沟时，您会怎么做？

<div class="grid_4 my_background">
 A background image...
</div>

.my_background {
 background: url(someimage.jpg);
}

Answer 1

如果我理解了您的问题，您应该考虑使用换行div（下面的示例代码中为gridWrapper）围绕您的网格div，并放置absolute定位<img>（{在下面的示例代码中{1}}，其中gridBackground更大（如果它必须看起来像您提供的图片）或更低（如果它是正确的背景）比包含网格的底层div系统

使用z-index css属性中的图像，您无法通过IE7-IE8控制其大小，因为它们不支持background-image属性（如您所见here ）。

使用background-size元素，您可以根据网格大小操纵此“背景”的大小。

<img>

......和css：

<div id="gridWrapper">

    <img id="gridBackground" src="your image url" />

    <div class="grid_4">
        <!-- your grid here -->
    </div>

</div>

如果您的背景图像具有平方比例，那么您就可以了。否则，你必须注意最终的扭曲或空白。

如果您因某种原因不关心IE7-IE8，可以通过以下方式将图像作为背景放置：

#gridBackground {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

div.grid_4 {
    z-index: 10;
}

您可以阅读here，选择最适合您的布局要求的div.grid_4 { background-image: url(your/image/url); background-size: length|percentage|cover|contain; } 属性值。