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

Question

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

http://www.charissasantos.la/mezcaleria.html

此处所需边框效果的图像：http: //www.charissasantos.la/img/shot.png

Answer 1

.............现场演示

嗨，现在已经习惯了这个 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 ;
    }

现场演示

有关图像边框链接的更多信息

Answer 2

实际上，对于您想要的结果，您必须使用pseudo class :before & :after下面提到的演示：- http://tinkerbin.com/7MrKH9Zz

HTML

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

CSS

#mainContent {
    background:white;
    margin-top: 15px;
    width:500px;
    height:500px;
    position:relative;
    border:1px solid red;
}

#mainContent:before {
    background:url(http://i.imgur.com/lPj6H.png) no-repeat 0 0;
    position:absolute;
    content:"";
    width:500px;
    height:7px;
    top:-8px;

}

Answer 3

除了这些答案之外，您还可以将相同的答案应用于background您的#footer和#mainContent选择器。

例如;

#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;
}

这里的工作示例。

Answer 4

使用这个结构：

<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;
}