Question

我想让DIV（div2）的一部分透明，以便显示DIV（div2）下的DIV（div1）的背景颜色。

<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。我希望它看起来像这样：

我创造了两种你可以在小提琴中看到的图像。

您是否知道如何解决问题？如果您有想法，我可以更改透明度图像。图像可以不同。

Answer 1

你真的不需要这里的图像，你可以使用css三角形的css 100％解决方案：

＆＃13;

.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;

Answer 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;
}

Answer 3

我找到了一个新的解决方案，但不容易实现。首先，你需要一个计算器，并且知道Math Pythagore是如何工作的。

想法是在孩子身上放置一个带有背景图像和相同图像的框，然后将子图像放在右边然后旋转，困难的部分是准确放置图像以与背景图像对应。

对于分隔符，我使用了两个箭头之间的旋转方块。然后对于最后一个箭头，我使用与第一个箭头相同的方式，没有前三角形来隐藏第一个部分。全部用z-index放在绝对位置。

enter image description here

但最后处理图像。享受！

.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

Answer 4

你的方法是错误的：你的图像由一个大的透明箭头形状的＆＃34;孔＆＃34;，你用背景颜色填充，以及箭头外部的部分（三个三角形），是白色的：

enter image description here

这就是造成问题的原因。例如：

＆＃13;

.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;

解决方案：简单地颠倒您的方法，将您的图像转换为由大彩色箭头和侧面三个透明三角形组成的图像;那么你可以重叠它们而不会覆盖下面的对象（阅读：上一个和下一个箭头）。

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

4 个答案: