流体布局背景100％宽，每侧50px填充

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;
}

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