gpt4 book ai didi

html - 显示具有较低 z-index 的 DIV 的背景颜色

转载 作者:行者123 更新时间:2023-11-28 04:52:53 24 4
gpt4 key购买 nike

我想使 DIV (div2) 的一部分透明,以便它显示 DIV (div2) 下的 DIV (div1) 的背景色。

http://jsfiddle.net/499nhjb0/2/

<br>
<div class="firstDiv" style="z-index:1;" >
<img src="http://fs1.directupload.net/images/150226/fag7h2u7.png" style="display:block;" width="auto" height="50"/>
</div>

<div class="secondDiv" style="z-index:2; ">
<img src="http://fs2.directupload.net/images/150226/xmv678we.png" style="display:block;" width="auto" height="50"/>
</div>
<br>
div1 with higher z-index
<br>
<div class="firstDiv" style="z-index:3;" >
<img src="http://fs1.directupload.net/images/150226/fag7h2u7.png" style="display:block;" width="auto" height="50"/>
</div>

<div class="secondDiv" style="z-index:2; ">
<img src="http://fs2.directupload.net/images/150226/xmv678we.png" style="display:block;" width="auto" height="50"/>
</div>
<br>

我使用的图像是透明的,所以颜色(div-背景)是可变的。目前 image1 的峰值看起来不是来自 image1。我希望它看起来像这样: http://fs1.directupload.net/images/150226/45r27i57.png

我创建了两种类型的图像,您可以在 fiddle 中看到。

你知道如何解决这个问题吗?如果您有想法,我可以更改透明图像。图片可以不同。

最佳答案

你真的不需要这里的图片,你可以使用 css 三 Angular 形的 100% 解决方案:

.arrow {
width:100px;
height:50px;
background-color: red;
position: relative;
float: left;
}
.arrow:before,
.arrow:after{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
position: absolute;
top: 0;
}
.arrow:before {
left:0;
border-color: transparent transparent transparent #fff;
}
.arrow:after {
right:-50px;
}

.arrow-left {
z-index:1;
background-color: red;
}
.arrow-left:after {
border-color: transparent transparent transparent red;
}

.arrow-right {
margin-left: 10px;
background-color: blue;
}

.arrow-right:after {
border-color: transparent transparent transparent blue;
}
<div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div>

关于html - 显示具有较低 z-index 的 DIV 的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28739621/

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