Question

我有以下情况：

我有一个像这样的css钻石形状：

.diamond {
    border-style: solid;
    border-color: transparent transparent #9b59b6 transparent;
    border-width: 0 55px 60px 55px;
    height: 0;
    width: 300px;
    position: relative;
    margin: 20px 0 50px 0;
}
.diamond:after {
    content: "";
    position: absolute;
    top: 60px;
    left: -55px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #9b59b6 transparent transparent transparent;
    border-width: 150px 150px 0 150px;
}

这导致了一颗非常漂亮的钻石。在钻石里面，我想把一张足够小的照片放在里面。

这是图片的简单标记和propper css类：

.logo-sponsor{
  z-index: 1000;
  width: 250px; 
  height: auto;
  margin: 0 auto;
  display: block;
}

标记：

<div class="diamond">
  <img src="http://www.userlogos.org/files/logos/jumpordie/tigo_01.png" class="logo-sponsor">
</div>

一切似乎都没问题，直到你预览它并且你看到图片顶部的一半钻石。我认为一个简单的高z-index可以解决这个问题，但事实并非如此。关于如何制作钻石的任何想法＆＃34;回去＆＃34;并将图片带到前面＆＃34;？

这里有pen供你试验。

Answer 1

将position: relative;添加到.logo-sponsor

http://codepen.io/TomSpeak/pen/DIJds

这就是你追求的目标吗？

原因是，默认情况下它是静态的，忽略z-index。

编辑：就像TylerH上面所说，这里有很多好消息：How do I use the z-index properly?

Z-index不处理css形状内的图像

1 个答案: