背景图像顶部的 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;
}

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

谢谢!

JsFiddle

Answer 1

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

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

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