css - 流畅的布局背景 100% 宽，每边有 50 像素的填充

Question

好的，所以我需要添加一个背景图像来重复 100%，但我需要在每一侧留出边距。

******************************************
*    *                              *    *
* 50 *                              * 50 *
* px * This background image should * px *
*    * repeat-x 100% minus 100px.   *    *
*    *                              *    *
******************************************

Answer 1

我会在 div 中使用 div。这样，您可以将背景应用到第二个 div 并让第一个 div 担心边距。

#div1 {
    margin: 0 50px;
}

#div2 {
    background: url('XXX') no-repeat;
    background-size: 100% 100%;
}

请注意：background-size 是 CSS3 属性，受 IE9+、Firefox 4+、Opera、Chrome 和 Safari 5+ 支持。

或者使用：

#div {
    background: url('XXX') repeat-x;
    margin: 0 50px;
}

这不是很好的做法，我不确定哪个是最佳解决方案，具体取决于您的背景是颜色/图案还是图像。如果不是图像，请使用后一种解决方案。