我想让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-background)是可变的。目前,image1的峰值看起来不像是image1。 我希望它看起来像这样:
我创造了两种你可以在小提琴中看到的图像。
您是否知道如何解决问题?如果您有想法,我可以更改透明度图像。图像可以不同。
答案 0 :(得分:2)
你真的不需要这里的图像,你可以使用css三角形的css 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;
}
&#13;
<div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div>
&#13;
答案 1 :(得分:2)
这是一个可行的示例,具有悬停效果和活动状态:http://jsfiddle.net/jo27axjc/1/
玩得开心!
.breadcrumb {
display: inline-block;
overflow: hidden;
}
.breadcrumb a {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 12px;
line-height: 36px;
color: white;
padding: 0 20px 0 10px;
background: blue;
position: relative;
}
.breadcrumb a:first-child:before {
left: 14px;
}
.breadcrumb a:last-child {
border-radius: 0 5px 5px 0;
}
.breadcrumb a.active, .breadcrumb a:hover span, .breadcrumb a:hover{
background: red;
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
background: red;
}
.breadcrumb a span{
display: block;
z-index: 2;
position: relative;
left: 20px;
background: blue;
padding-right: 5px;
}
.breadcrumb a.active{
padding-left:0;
}
.breadcrumb a.active span{
background:red;
}
.breadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -18px;
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background:blue;
box-shadow:
2px -2px 0 2px rgba(255, 255, 255, 1),
3px -3px 0 2px rgba(255, 255, 255, 0.1);
}
.breadcrumb a:last-child:after {
content: none;
box-shadow:none;
}
答案 2 :(得分:2)
我找到了一个新的解决方案,但不容易实现。首先,你需要一个计算器,并且知道Math Pythagore是如何工作的。
想法是在孩子身上放置一个带有背景图像和相同图像的框,然后将子图像放在右边然后旋转,困难的部分是准确放置图像以与背景图像对应。
对于分隔符,我使用了两个箭头之间的旋转方块。 然后对于最后一个箭头,我使用与第一个箭头相同的方式,没有前三角形来隐藏第一个部分。 全部用z-index放在绝对位置。
但最后处理图像。享受!
.wrap {
position: relative;
height: 100px;
overflow: hidden;
}
.arrow {
position: absolute;
width: 136px;
height: 100px;
}
.arrow-left:before {
content: "";
position:absolute;
top: 0;
left:0;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 50px 50px;
border-color: transparent transparent transparent #ffffff;
}
.arrow span {
width:70.71px;
height:70.71px;
overflow: hidden;
transform: rotate(45deg);
position: absolute;
top: 14px;
right: -35px;
}
.arrow span img {
position: absolute;
top: 11px;
right: -40px;
transform: rotate(-45deg);
}
.arrow-left {
background: url(http://lorempicsum.com/futurama/200/100/1) 0 0 no-repeat;
z-index: 3;
}
.separator {
left: 95px;
background: #fff;
width:90px;
height:90px;
transform: rotate(45deg);
position: absolute;
top: 4.5px;
z-index:2;
}
.arrow-right {
background-image: url(http://lorempicsum.com/simpsons/200/100/1);
position: absolute;
top: 0;
left: 150px;
z-index: 1;
}
<div class="wrap">
<div class="arrow arrow-left">
<span>
<img src="http://lorempicsum.com/futurama/200/100/1" alt="" />
</span>
</div>
<div class="separator"></div>
<div class="arrow arrow-right">
<span>
<img src="http://lorempicsum.com/simpsons/200/100/1" alt="" />
</span>
</div>
</div>
也可以在我的codepen上查看:http://codepen.io/pik_at/pen/dPKXWp
答案 3 :(得分:0)
你的方法是错误的:你的图像由一个大的透明箭头形状的&#34;孔&#34;,你用背景颜色填充,以及箭头外部的部分(三个三角形),是白色的:
这就是造成问题的原因。例如:
.arrow {
position: relative;
display: inline-block;
width: 125px;
height: 50px;
vertical-align: top;
background-image: url(http://fs1.directupload.net/images/150226/fag7h2u7.png);
background-repeat: no-repeat;
background-position: top left;
background-size: 125px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
&#13;
<div class="arrow red"></div>
<div class="arrow blue"></div>
<br>
<div class="arrow red" ></div>
<div class="arrow blue" style="left: -30px;"></div>
<br>
<div class="arrow red" ></div>
<div class="arrow blue" style="left: -30px; z-index: -1;"></div>
&#13;
解决方案:简单地颠倒您的方法,将您的图像转换为由大彩色箭头和侧面三个透明三角形组成的图像;那么你可以重叠它们而不会覆盖下面的对象(阅读:上一个和下一个箭头)。