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;

.round divs似乎在正确的位置，但他们的背景没有出现，我不确定为什么！

这是jsfiddle

我尝试为容器div分配一个坚实的背景颜色，尽管它们的z-index仍然在图像下面。

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

Answer 1

您需要从容器元素中删除z-index，并在图片see here上设置否定的z-index。

Answer 2

我认为他们根本没有露面？我冒昧地猜测这是因为你的网址。我不认为“@”是一个在文件名中使用的有效字符（如果是，那不是很好的做法）。

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

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

Answer 3

这将解决它：

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

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

叠加背景图像不显示

3 个答案: