覆盖背景图像不显示

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

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

来源

2011-06-16 Damon

什么是空img标签？据我所见，他们是他们需要的地方。唯一的问题可能是你没有为指定任何东西，从而导致它为空并且可能为0px高度。编辑：也许这些@gui路径？从来没有看到有@符号的路径。 – robx 2011-06-16 20:41:45

你有活的链接吗？ – thirtydot 2011-06-16 20:44:30

我刚刚拿出了img src，因为它是一个相对路径，我目前没有在线项目。 – Damon 2011-06-16 22:08:56

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

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

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

来源

2011-06-16 20:46:10 Shauna

图片链接即将推出。 @符号对我来说也很奇怪，但它们是我必须使用的CMS的一部分。 – Damon 2011-06-16 22:09:30

这将解决这个问题：

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

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

来源

2011-06-16 22:21:30 kei

这并不涉及图像背后的叠加层。它的确帮助他们排队......但我很困惑，为什么这是一个问题。我希望图像与其容器div大小相同。为什么需要填充？ – Damon 2011-06-21 20:09:13

你是认真的吗？你在一个div上放置一个**不透明的**图像。当然，你不会看到“角落”，因为它是一个背景图像。如果你想让它像你编码一样工作，把你的JPG图像变成透明的PNG图像。 – kei 2011-06-21 20:15:50

您的图片代码改变了（png与透明度）：http://jsfiddle.net/ynzRp/ – kei 2011-06-21 20:17:39

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

来源

2011-06-16 22:32:54 jeroen

仍然不完全清楚为什么这是必要的。如果z-index是专门设置的，不应该包含什么含义？（我想很清楚它确实是..） – Damon 2011-06-17 04:37:50

因此，我不能将容器元素放置在img顶部，我必须将容器放置在图像下方？然后将每个其他包含元素（包装器，内容，帖子等）放在那里？一定有更好的方法！ – Damon 2011-06-17 05:02:48

@Damon，你不得不将图像放置在容器的下方，使用图像的负Z指数和容器的Z指数。只要看看jsfiddle的例子。 – jeroen 2011-06-17 13:31:51

覆盖背景图像不显示

回答

相关问题