Html 如何在此现有代码中将顶部边框图像添加到mainContent div中？

我尝试创建3个div，将上下边框图像添加到mainContent div，但无法使其对齐。是否有一种简单的方法来修改此代码，以便在主白色部分的顶部和底部添加此蓝色边框

此处显示所需边界效果的图像：

………

您好，现在您已习惯于将此css用于

mainContent

   #mainContent.grid_14 {
border-top:solid 10px;
border-bottom:solid 10px;
border-width:10px;
border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
-webkit-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
-moz-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
    }

有关图像边框的详细信息

……

您好，现在您已习惯于将此css用于

mainContent

   #mainContent.grid_14 {
border-top:solid 10px;
border-bottom:solid 10px;
border-width:10px;
border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
-webkit-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
-moz-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
    }

---

有关图像边框的更多信息

实际上，为了获得所需的结果，您必须使用

伪类

：在

之前和之后，如以下演示所述：-

HTML

<div id="mainContent">
asfdasdfafafafaf
</div>

---

实际上，为了获得您想要的结果，您必须使用

伪类

:before&:before&:before

如下面的演示所述：

HTML

<div id="mainContent">
asfdasdfafafafaf
</div>

---

除了这些答案，您还可以将相同的

背景应用于
#footer
和
#main content
选择器

比如,

#footer {
  background-image: url(img/img-blue-border.png);
  background-color: #C39C5B;
  background-repeat: repeat-x;
  background-position: top;
  text-align: left;
  font-size: 11px;
  padding: 15px 0;
}
#mainContent {
  margin-top: 15px;
  padding-bottom: 20px;
  background-image: url(img/img-blue-border.png);
  background-color: #fff;
  background-position: top;
  background-repeat: repeat-x;
}

.
除了这些答案，您还可以将相同的
背景应用于
#页脚
和
#主要内容
选择器

比如,

#footer {
  background-image: url(img/img-blue-border.png);
  background-color: #C39C5B;
  background-repeat: repeat-x;
  background-position: top;
  text-align: left;
  font-size: 11px;
  padding: 15px 0;
}
#mainContent {
  margin-top: 15px;
  padding-bottom: 20px;
  background-image: url(img/img-blue-border.png);
  background-color: #fff;
  background-position: top;
  background-repeat: repeat-x;
}

.
使用此结构：

<div class="wrapper">
<div class="border"></div>
<div class="content"></div>
<div class="border"></div>
</div>

// CSS

.wrapper div {
clear:both;
}

.border {
 width:100%;
 margin:0;
 padding:0;
 height: //height of image;
 background-image:url(image.png);
 background-repeat:repeat-x;
}


//CSS
.包装部{
明确：两者皆有；
}
.边界{
宽度：100%；
保证金：0；
填充：0；
高度：／图像的高度；
背景图片：url（image.png）；
背景重复：重复-x；
}
使用此结构：

<div class="wrapper">
<div class="border"></div>
<div class="content"></div>
<div class="border"></div>
</div>

// CSS

.wrapper div {
clear:both;
}

.border {
 width:100%;
 margin:0;
 padding:0;
 height: //height of image;
 background-image:url(image.png);
 background-repeat:repeat-x;
}


//CSS
.包装部{
明确：两者皆有；
}
.边界{
宽度：100%；
保证金：0；
填充：0；
高度：／图像的高度；
背景图片：url（image.png）；
背景重复：重复-x；
}
虽然这会起作用，但它不是语义代码。不应该只有显示图像的
div
s！如果可能的话（我认为在这种情况下是这样），避免这种情况是最好的做法。是的，我同意你的观点，但考虑到非css3浏览器不理解边框图像属性，这是可行的。@Rohit，你想让我把这个人的代码做成JSFIDLE吗？虽然这样做可行，但它不是语义代码。不应该只有显示图像的
div
s！如果可能的话（我认为在这种情况下是这样），避免这种情况是最好的做法。是的，我同意你的观点，但考虑到非css3浏览器不了解边框图像属性，这是可行的。@Rohit，你想让我把这个人的代码分成JS吗？这是一个聪明的答案@Shailender，但是：以前只有IE8+支持。这些其他答案中的一些同样有效，但支持IE6+。是的，我知道JMEA，但现在人们正在快速前进。我想有多少人在使用IE6+7这是真的，但数据显示，不幸的是，仍然有很大一部分人在使用那些旧的IEs。既然有同样好的、更兼容的解决方案，为什么还要限制您的兼容性呢？=）这是一个聪明的答案@Shailender，但是：以前只有IE8+支持。这些其他答案中的一些同样有效，但支持IE6+。是的，我知道JMEA，但现在人们正在快速前进。我想有多少人在使用IE6+7这是真的，但数据显示，不幸的是，仍然有很大一部分人在使用那些旧的IEs。既然有同样好的、更兼容的解决方案，为什么还要限制您的兼容性呢？=）Charissa你从答案中得到了什么想法……我选择了最简单的方法将其添加为顶部背景图像。非常感谢。Charissa你从答案中得到了什么想法……我选择了最简单的方法将其添加为顶部背景图像。非常感谢。谢谢@jmeas，我很乐意这么做。我用这个代码试过了，但似乎不起作用<代码>边框顶部图像：url（img/img blue border.png）-moz边框图像：url（img/img blue border.png）；/*Firefox*/-webkit边框图像：url（img/img blue border.png）；/*Safari*/-o-border-image:url（img/img blue border.png）；/*Opera*/
可能是您还没有上传文件？我没有在
/img
中看到它们，我只是意识到我甚至没有打算使用
边框。一直以来，我都想说
背景
！我想上面那个使用
边框的简洁解决方案把我弄糊涂了。无论如何，我更新了CSS并添加了。谢谢@jmeas，我很乐意这样做。我用这个代码试过了，但似乎不起作用<代码>边框顶部图像：url（img/img blue border.png）-moz边框图像：url（img/img blue border.png）；/*Firefox*/-webkit边框图像：url（img/img blue border.png）；/*Safari*/-o-border-image:url（img/img blue border.png）；/*Opera*/
可能是您还没有上传文件？我没有在
/img
中看到它们，我只是意识到我甚至没有打算使用
边框。一直以来，我都想说
背景
！我想上面那个使用
边框的简洁解决方案把我弄糊涂了。无论如何，我更新了CSS并添加了。