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

Question

我一直在努力几个小时试图让这个简单的边框出现在设置高度的 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;
}

它只是行不通。 如果我的描述不清楚，这张图片应该清楚我想要传达的内容：

谢谢！

提琴手

Answer 1

以防万一您不想放置::before或::after元素，您可以简单地使用background-clip属性。

.myDiv {
     background-clip: padding-box;
}

示例： https : //codepen.io/geekschool/pen/JBdpdj

Answer 2

这是你想要达到的目标吗？ js小提琴

#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 。