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

【问题标题】：Specifying images for top, bottom, left and right. How to do?指定顶部、底部、左侧和右侧的图像。怎么做？
【发布时间】：2009-09-15 01:23:42
【问题描述】：

我可以像这样指定 CSS：

背景：#CFCFCF url(button.bmp) 重复-x 顶部；

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

【问题讨论】：

一个元素只能指定一个背景图片

标签： css

【解决方案1】：

您需要嵌套一些元素以每个显示一张图像。正如韦恩所说，您只能为一个元素指定一个背景图像（直到更多浏览器支持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;}

而且您还需要正确定位元素...

【讨论】：

【解决方案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（我对此投了反对票）。

【讨论】：