Question

好的，我正在尝试设置我的背景图像设置就像它一样＆lt; ---左侧重复图像---中心图像---右侧重复图像---＆gt;

左侧的图像与右侧的图像不同。

我尝试过使用此

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 { background：url（../ Img / Background-03.png）; 宽度：50％; 位置：绝对; 左：0px; 身高：100％; } #rightHalf { background：url（../ 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张图片，

＆lt; ---左侧重复图像---中心图像---右侧重复图像---＆gt;

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

＆lt; ---离开Div ---中心区---右侧Div ---＆gt;

2-创建表格并制作23列

＆lt; --- C1 --- C2 --- C3 ---＆gt;

CSS背景图像重复x左侧和右侧重叠

3 个答案: