背景图像顶部的CSS边框（相同的div？）

我已经努力了几个小时，试图让这个简单的边框出现在一个设定高度的div顶部，但这一切都没有发生。我已经检查了z索引和“：after”，但似乎没有任何效果

内容的父是：（建立内容在页面的中间）

然后由div类“greycontent”填充内容：

现在背景URL覆盖的区域尝试包含边框（远离边框）：

这就是行不通。如果我的描述不清楚，这张图片应该能清楚地表达我想要表达的内容：

谢谢大家!

---

这就是你想要达到的目标吗

#content {
    position: relative;
    margin: 0 auto;
    top: 50px;
    width:800px;
    overflow:hidden;
    background:#ccc;
    width:800px;
}
.greycontent {
    position: relative;
    z-index: 1;
    height: 350px;
    width:350px;
    border:1px solid #fff;
    background:#ccc;
    margin:0 auto 60px;
}

---

更新了

以防您不想在

或
元素之前或之后放置
：：，您只需使用
背景剪辑
属性即可

.myDiv{
背景剪辑：填充框；
}

例如：
你能把你的HTML标记放在一起吗？或者正如@Adrift在我输入时所说的，一把小提琴？当然，我现在就这么做。“远离边缘”部分对我来说不清楚。对不起，如果我不清楚-远离边缘，我指的不是位于父元素定义的800px和350px宽度边缘的边界，而是有一个边界。这肯定能在视觉上达到预期效果，因此，谢谢你，但是我的问题是，我的完整源代码中的“content”父元素由几个子元素组成，因此在父元素中没有要建立的整体背景，而是我试图实现一个div来设置蓝色背景，另一个div在蓝色背景中放置边框。我应该在灰色内容div类中添加另一个divclass吗？再次感谢！我不太明白你的意思。依我的理解，这就是你的意思吗？
.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}

.fill {
    position:relative;
    z-index: 2;
    border-style: solid;
    border-width: 2px;
    border-color: red;
}

#content {
    position: relative;
    margin: 0 auto;
    top: 50px;
    width:800px;
    overflow:hidden;
    background:#ccc;
    width:800px;
}
.greycontent {
    position: relative;
    z-index: 1;
    height: 350px;
    width:350px;
    border:1px solid #fff;
    background:#ccc;
    margin:0 auto 60px;
}