替代使用剪辑路径作为背景图像

Question

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

使用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;

然后图像将显示为方形，因此不起作用。

我已经设法使用clip-path使其工作，但是在许多浏览器中支持得很差 - 所以我试图避免这种方法。

Answer 1

您还可以查看混合混合模式或背景混合模式，但也很难使用，而且还没有那么多支持。

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