Css 覆盖背景图像不显示

我试图创建圆形图像（在这种情况下是固定宽度的，所以我只想使用一个覆盖png），但角落覆盖似乎没有显示出来

标记如下所示：

 <div class="rounded roundTop">
     <div class="rounded roundBottom">
         <img />
     </div> 
 </div>



.rounded {
    position: relative;
    z-index: 99;
}

.roundTop{    
    background: transparent url('../@gui/round-img-top-155.png') top left no-repeat; 
}

.roundBottom{
    background: transparent url('../@gui/round-img-bottom-155.png') bottom left no-repeat;   
}

img {  
    width: 155px;
    padding-right: 12px;
    position: relative;
    z-index: 1;

.四舍五入{
位置：相对位置；
z指数：99；
}
.roundTop{
背景：透明url（'../@gui/round-img-top-155.png'）左上方无重复；
}
.圆底{
背景：透明url（'../@gui/round-img-bottom-155.png'）左下角无重复；
}
img{
宽度：155px；
右侧填充：12px；
位置：相对位置；
z指数：1；

四舍五入的div似乎在正确的位置，但他们的背景没有显示出来，我不知道为什么

这是一个

我尝试为容器div指定一个纯色背景色，尽管它们的z索引不同，但它们仍位于图像下方

---

我可以通过将图像本身发送到后面来获得图像前面的边框，但是它会被页面中的所有其他元素覆盖。

我假设它们根本没有显示出来？我大胆猜测这是因为您的url。我不认为“@”是文件名中使用的有效字符（如果是，这不是一个很好的做法）

检查以确保浏览器找到文件的一个好方法是打开浏览器的开发工具（对于Firefox，您需要安装Firebug；其他都是内置的），然后查看CSS视图。您应该能够单击或悬停在URL上，查看它是否加载预览（我知道这在Firebug中是有效的，我认为它在其他版本中也是有效的，如果不是，您应该能够通过下载视图中的文件是否已下载来判断）

除此之外，一个实时链接或jsfiddle也会有所帮助。

这将解决这个问题：

.roundBottom{
    padding: 18px 0px;
    background: transparent url('http://ctrlshiftweb.com/round-img-bottom-155.png') bottom left no-repeat;
}

---

您需要考虑图像的高度。：D

您需要从容器元素中删除

z-index

，只需在图像上设置一个负

z-index

。

空img标记用于什么？据我所知，它们位于需要的位置。唯一的问题可能是您没有为编辑：也可能是那些@gui路径？从来没有见过带有@符号的路径。你有一个活动链接吗？我只是把img src拿出来，因为它是一个相对路径，我目前没有在线项目。图像链接正在出现。@符号对我来说也很奇怪，但它们是CMS的一部分，我知道我必须使用。仍然不完全清楚为什么这是必要的。如果专门设置了z-索引，那么包含什么内容不是很重要吗？（我想很明显是这样的。）因此，我无法将容器元素定位在img的顶部，我必须将容器定位在图像下方？然后定位其他所有包含的元素（包装、内容、帖子等）背后？一定有更好的方法！@Damon，不，你必须使用负z索引将图像放置在容器下方，而容器则完全没有z索引。只需看看JSFIDLE上的示例……图像位于其容器后面（不是直接容器，而是页面上的其他元素）这并不能解决图像后面的覆盖层问题。它确实有助于它们正确排列。但我不明白为什么这是一个问题。我希望图像与其容器分区大小相同。为什么需要填充？你是认真的吗？你在分区上放置不透明图像。当然，你不会看到“角”因为它是一个背景图像。如果你想让它像你编码的那样工作，请将你的jpg图像制作成一个透明的png。更改图像后的代码（透明的png）：@kei..jpg应该放在底部，不需要透明，在顶部放一个角图片，以呈现圆角的外观（背景div颜色将匹配png的颜色）