css - 背景图片顶部的CSS边框(相同的div？)

我一直在努力几个小时，试图使这个简单的边框出现在设置高度的div上，但这只是没有发生。我已经检查了z-indexing和'：after'，但是似乎没有任何效果。

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

#content {
    position: relative;
    margin-left:auto;
    margin-right:auto;
    top: 50px;
    width:800px;
}

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

.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}

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

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

只是行不通。如果我的描述不清楚，则此图像应该可以清除我要传达的内容：



谢谢！

JsFiddle

最佳答案

这是您想要达到的目标吗？ jsFiddle

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

更新了您的jsFiddle。

关于css - 背景图片顶部的CSS边框(相同的div？)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18277954/