Question

我可以像这样指定CSS：

background: #CFCFCF url(button.bmp) repeat-x top;

但是如果我想要一个顶部的图像以及左，右和底部的图像，我该怎么做呢？

Answer 1

您需要嵌套一些元素以分别显示一个图像。正如Wayne所说，您只能为元素指定一个背景图像（在更多浏览器中支持CSS3之前）。

<div id="top">
   <div id="container">
       Put your content here
   </div>
   <div id="right"></div>
   <div id="bottom"></div>
</div>

然后将CSS应用于每个元素

#top {background: url(top.jpg) no-repeat;}
#container {background: url(left.jpg) no-repeat;}
#right {background: url(right.jpg) no-repeat;}
#bottom {background: url(bottom.jpg) no-repeat;}

你还需要正确定位元素......

Answer 2

HTML

<div class="nice">... inner HTML goes here...</div>

CSS

.nice {
  border: 1px solid #ffcf86;
  padding-left: 50px;
  padding-right: 50px;
  background: url(i5.gif) no-repeat 50% 50%;
}

.nice:before, .nice:after {
  display: block;
  height: 41px;
  margin-left: -50px;
  margin-right: -50px;
  font-size: 0;
}

.nice:before {
  content: url(i1.gif);
  background: url(i2.gif) no-repeat 100% 0;
}

.nice:after {
  content: url(i3.gif);
  background: url(i4.gif) no-repeat 100% 0;
}

结果：

http：//dense13.com/blogExamples/multiple-background-images-with-css2/desiredResult.gif

来源http：//dense13.com/blog/2008/08/31/multiple-background-images-with-css2 /

旧版本：

看来你可以按照条款做一些事情（间隔属性值以便你获得效果）：

#some_id {
    background-image:    url('image_url'), url('another_image_url');
    background-position: top left,         top right;
}

来源Quirksmode，这只适用于Safari（我对其进行了投票）。

指定顶部，底部，左侧和右侧的图像。怎么做？

2 个答案: