覆盖背景图像不显示

Question

我想创建圆形图像（在这种情况下固定宽度，所以我只想使用覆盖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; 

的.rounded的div似乎是在正确的地方，但他们的背景没有显示出来，我不知道，为什么！

这里是一个jsfiddle

我尝试分配了坚实的背景颜色的div容器和他们的形象去下，尽管他们的z-index。

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

Answer 1

我假设他们根本没有出现？我想冒险猜测这是因为你的网址。我不认为“@”是在文件名中使用的有效字符（如果是的话，这不是一个好习惯）。

检查以确保浏览器找到该文件的一个好方法是打开浏览器的开发人员工具（对于Firefox，您需要安装Firebug;其他人都是内置的），然后查看CSS视图。你应该可以点击或悬停在URL上，看看它是否加载预览（我知道它适用于Firebug，我认为它适用于其他的，如果不是，你应该能够判断它是否下载了文件在下载视图中）。

除此之外，一个活的链接或jsfiddle会有所帮助。

Answer 2

这将解决这个问题：

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

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

Answer 3

您需要从容器元素中删除z-index，并在图像上设置一个负值z-index，see here。