CSS背景图像在x左和x右重复而不重叠

Question

好的，所以我正在尝试设置我的背景图片设置 所以它就像

左边的图片和右边的图片不一样。

我试过用这个

body{
background:
url(../Img/Background-01.png) center top no-repeat,
url(../Img/Background-02.png) right 0 repeat-x,
url(../Img/Background-03.png) left 0 repeat-x;
background-color:#232323;
}

但是 Background-02.png 与 Background-03.png 重叠，导致 Background-02.png 在页面的左侧和右侧重复，而它只意味着在右侧重复。

这是我设计的屏幕截图，它可能会让您更好地了解我正在尝试制作的内容 白框是背景层的一部分，它们在自己的图像中被裁剪出来，以便在网站上使用 [img]http://s7.postimg.org/iy0tm6k2j/Screen_Shot_2014_06_27_at_5_16_13_pm.png[/img]

任何帮助都会帮助解决这个问题。


好的，我知道这就是我使用的

'#Container{
    position:relative;
    width:1000px;
    margin: 0 auto;
    left: 0;
    right: 0;
    border:thin solid #000;
    z-index:4;
}
#BGCont
    {
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    z-index:0;
    height:500px;
    }
#BGLeft
    {
    position:absolute;
    width: 50%;
    left: 0;
    z-index:1;
    background:url(../Img/Background-03.png) left 0 repeat-x;
    height:500px;
    }
#BGRight
    {
    position:absolute;
    width: 50%;
    z-index:2;
    right: 0;
    background:url(../Img/Background-02.png) right 0 repeat-x;
    height:500px;
    }
#BGCenter
    {
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 1200px;
    z-index:3;
    background:url(../Img/Background-01.png) center top no-repeat;
    height:500px;
    }'

现在我的问题是，这是一种可以接受的方式还是太混乱了？

Answer 1

尝试在伪类之前和之后使用，如下所示。

body
{
 background: url(../Img/Background-01.png) center top no-repeat;
 background-color:#232323;
}
body::before
{
 background:url(../Img/Background-03.png) left 0 repeat-x;
}
body::after
{
 background:url(../Img/Background-02.png) right 0 repeat-x;
}

Answer 2

通过使用repeat-x，您所做的就是在左侧和右侧水平重复它。这就是为什么第二个图像与右侧的第三个图像重叠的原因。我建议单独编辑图像然后使用它。通过这种方法，您无需指定要在哪一侧重复，而只指定轴，即 x 或 y 或水平或垂直

或者如果您只想在两侧扩展它，那么您可以使用它：- #leftHalf { 背景：网址（../Img/Background-03.png）； 宽度：50%； 位置：绝对； 左：0px； 高度：100%； } #rightHalf { 背景：网址（../Img/Background-02.png）； 宽度：50%； 位置：绝对； 右：0px； 高度：100%； }

我也做过类似的事情。我在左侧放了一个灰色的停止标记，在右侧放了一个白色的停止标记，在您希望灰色结束的地方各放一个。在我的示例中，我将其设置为 40%。 背景：#7a7a7a； /* 旧浏览器 */

background: -moz-linear-gradient(top,  #7a7a7a 0%, #a5a5a5 40%, #ffffff 40%, #ffffff 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a7a7a), color-stop(40%,#a5a5a5), color-stop(40%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* IE10+ */

background: linear-gradient(top,  #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

Answer 3

据我了解，您希望显示 3 张图片，

有两种设置方法， 1- 创建 div 并将图像分配给这些 div

2- 创建表格并制作 23 列