背景图片上的CSS边框（相同的div？）

我一直在努力几个小时试图让这个简单的边框出现在设置高度的div顶部，但它只是没有发生。我已经检查了z-indexing和'：after'，但似乎没有任何工作。背景图片上的CSS边框（相同的div？）

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

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

它只是不会工作。如果我的描述不清楚，这个形象应该清理我想要传达：

enter image description here

谢谢！

JsFiddle

来源

2013-08-16 user2690050

你可以把[jsfiddle]（http://jsfiddle.net）放在一起吗？ – Adrift

你可以发布你的HTML标记吗？或者像@Adrift在我打字时说的那样，一把小提琴？ –

当然，我现在要做。 – user2690050

这是你想达到什么样的？ 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。

来源

2013-08-16 16:34:00 Shivam

这绝对可以达到所需的视觉效果，所以谢谢你，但是我的问题是，我的完整源代码中的'content'父元素由几个子元素组成，因此在父代中没有建立整体背景，而是我试图实现一个div来设置蓝色背景，另一个将边框放在这个蓝色背景中。我应该在灰色内容div类中添加另一个div类吗？再次感谢！ – user2690050

我有点不清楚你的意思。从我的理解，这是你的意思？ ** [的jsfiddle]（http://jsfiddle.net/jenqh/7/）** – Shivam

背景图片上的CSS边框（相同的div？）

回答

相关问题