Question

这可能是一个非常常见的问题。但是我试图在网上使用每个答案，但由于一些奇怪的原因，我的样式表中似乎存在冲突。我有一个背景图像（布）图案，重复整个内容。现在我试图向＃container2添加一个左右边框图像（带有线程，使其看起来像一个逼真的布料），它垂直向下重复。但每次我这样做，整个容器都会向下移动，当我调整位置时，它会消失。

我的代码如下：

<div id="container">
<div id="container2">
<div id="header">

....................content...............

</div>
</div>
</div>

CSS：

#container { background: #323232 url(images/container-bg.png) repeat; position: relative; }
#container2 { background:  url(images/container-bg-right.png) repeat; min-height: 300px; padding: 0px 0 0px 3%; max-width: 1000px; margin: 0 5% 0 5%; }
#header { margin-bottom:50px; }

提前谢谢。

Answer 1

您可以为背景设置多个图片警告所有浏览器都不支持

所以你的HTML可能是：

<div id="container">
  <div id="inset-borders">
    -- Content --
  </div>
</div>

CSS：

#inset-borders {
  background-image:url('left-border.png') left repeat-y, url('right-border.png') right repeat-y;
}

Answer 2

你不想要：

<div id="container"> </div>
<div id="container2"> </div>
<divid="header"> </div>

或者你想要“容器”里面的“container2”

如何制作具有重复左右图像边框的背景？

2 个答案: