对背景图像使用剪辑路径的替代方法答案

【问题标题】：Alternative to using clip-path for background images对背景图像使用剪辑路径的替代方法
【发布时间】：2016-11-09 20:18:40
【问题描述】：

我正在尝试使三角形背景图像覆盖全宽图像。

使用border-with、border-color 和background-image 制作三角形背景图像很容易，如下所示：

border-width: 350px 50vw 0px 0px;
border-color: white transparent transparent transparent;
background-image: url(/img/rainbow4.jpg);

但由于存在无法覆盖在另一张图像之上的空白，您会得到以下http://codepen.io/anon/pen/ENVWRz

如果你设置：

border-color: transparent transparent transparent transparent;

然后图像会显示为正方形，所以这不起作用。

我已经设法使用剪辑路径使其工作，但是许多浏览器对此的支持很差 - 所以我试图避免这种方法。

【问题讨论】：

标签： css background-image clip-path

【解决方案1】：

您还可以查看 mix-blend-mode 或 background-blend-mode ，但使用起来也很棘手，而且还没有那么多支持。

div.triangle_test {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 350px 50vw 0px 0px;
  border-color: white transparent transparent transparent;
  display: block;
  position: absolute;
  z-index: 0;
  right: 0;
  background-image: url('http://img06.deviantart.net/25de/i/2012/134/3/1/037_by_koko_stock-d4zq28i.jpg');
}
div.full_width {
  mix-blend-mode: darken;
  background-image: url('http://somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg');
  width: 100%;
  height: 350px
}

<div class="triangle_test"></div>
<div class="full_width"></div>

http://codepen.io/gc-nomade/pen/JRdEVO

【讨论】：