Question

我有一个带背景图片的div

#test {
  background-image: url('http://image.shutterstock.com/z/stock-photo-asian-developer-using-laptop-computer-sitting-working-real-office-331439570.jpg');
  height: 400px;
  width: 400px;
  background-size: contain;
}

我有另一个test的子div，涵盖了父test div

#cover {
  background-color: white;
  height: 400px;
  width: 400px;
}

HTML

<div id="test">
  <div id="cover">

  </div>
</div>

JSFiddle

是否可以操纵cover div来显示图像的一部分（test）？例如，要显示图像的右下角三角形，同时在cover div上保持test div

P.S。我对这个问题的处理方法可能有误，css肯定不是我强大的套件

Answer 1

使用渐变

使背景透明

＆＃13;

#test {
  background-image: url('http://image.shutterstock.com/z/stock-photo-asian-developer-using-laptop-computer-sitting-working-real-office-331439570.jpg');
  height: 400px;
  width: 400px;
  background-size: contain;
}
#cover {
  background: linear-gradient(210deg, transparent 150px, white 150px);
  height: 400px;
  width: 400px;
}

＆＃13;

<div id="test">
  <div id="cover">
  
  </div>
</div>

＆＃13;

Answer 2

只需使用borders即可获得完美的三角形。使用此功能，您还可以在cover div。

中插入文本或任何其他数据

＆＃13;

body{background: #111;}

#cover {

  background-color: #fff;
  height: 300px;
  width: 300px;
  position: relative;

}

.triangle {
  position: absolute;
  bottom: 0;
  right: 0;
  
  background-image: url('http://image.shutterstock.com/z/stock-photo-asian-developer-using-laptop-computer-sitting-working-real-office-331439570.jpg');
  background-position: -70px -70px;
  background-size: 300px;
  background-repeat: no-repeat;

  display: inline-block;
  
  border: 70px solid #fff;
  border-bottom: 70px solid transparent;
  border-right: 70px solid transparent;

}

＆＃13;

<div id="cover">
  <div class="triangle">
  </div>
</div>

＆＃13;

Answer 3

您可以使用css clip-path属性。这样就不需要在这里使用额外的html元素，即cover。另一点是你可以使用相对维度而不是绝对维度：

＆＃13;

#test {
  background-image: url('http://image.shutterstock.com/z/stock-photo-asian-developer-using-laptop-computer-sitting-working-real-office-331439570.jpg');
  height: 400px;
  width: 400px;
  background-size: contain;
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

＆＃13;

<div id="test">
</div>

＆＃13;

您可以使用this website快速创建剪辑路径。另外，clip-path here还有一个很好的指南。

问题是 browser support 。

删除div的一部分以显示基础图像

3 个答案: