gpt4 book ai didi

html - Z-index 不适用于 css 形状内的图像

转载 作者:行者123 更新时间:2023-11-28 17:36:34 24 4
gpt4 key购买 nike

<分区>

我有以下场景:

我有一个像这样的 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;
}

这导致了一颗非常漂亮的钻石。在钻石内部,我想放一张小到可以放进去的图片。

这是图片的简单标记和适当的 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 可以解决问题,但事实并非如此。关于如何使钻石“返回”并将图片“放在前面”的任何想法?

这是一个 pen供您实验。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com