css - 基于网格的 CSS : what to do with background images outside of the grid

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> (在下面的示例代码中为 gridBackground)放入其中，带有 z-index比包含网格系统的底层 div 更大(如果它必须看起来像您提供的图片)或更低(如果它是合适的背景)。

与 background-image 中的图像css 属性你无法用 IE7-IE8 控制它的大小，因为它们不支持 background-size属性(如您所见 here )。

使用 <img>元素，您可以根据网格大小操纵此“背景”的大小。

<div id="gridWrapper">

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

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

</div>

...和CSS:

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

div.grid_4 {
    z-index: 10;
}

如果您的背景图片是方形的，您可以接受。否则，您必须注意最终的扭曲或空白。

如果您出于某种原因不关心 IE7-IE8，您可以通过简单的操作将您的图像作为背景:

div.grid_4 {
    background-image: url(your/image/url);
    background-size: length|percentage|cover|contain;
}

您可以选择background-size通过阅读 here 最适合您的布局要求的属性值.