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

现在由背景网址覆盖的区域会尝试包含边框（远离边缘）：

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

它不会起作用。如果我的描述不清楚，这张图片应该清楚我要传达的内容：

谢谢！

JsFiddle

Answer 1

这是你想要实现的吗？的 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 。

Answer 2

只要您想要一个简单的CSS属性并且不需要或不想放置::before和::after元素，就可以使用background-clip属性。

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

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