如何用适合图片内部的div来调整图片的角度。

Question

我需要找到一个解决方案，以保持裁剪的图像，但有内容坐在里面的div上的不透明度过滤器。我面临的问题是，它不会匹配的角度，我不能使用重叠隐藏，需要找到一个解决方案......任何人都可以帮助这个耻辱，你不能使用一个::after在图像上添加过滤器div变暗的部分:(

.promo {
  position: relative;
}

.promo img {
  -webkit-clip-path: polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
  clip-path: polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
}

.promo__content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100% color: #fff;
  background: black;
}

<div class="promo">
  <img src="https://i.picsum.photos/id/100/600/600.jpg" >
  <div class="promo__content">
    Content Here
  </div>
</div>

举例说明我想做的是在有角度的图片中加入黑框，黑框会被看穿。

Answer 1

将剪贴路径应用于整个容器，而不仅仅是图像，以获得你想要的东西。

.container {
  margin:50px 0;
  clip-path:polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
  display:flex;
}
.box {
  width:30%;
  padding:80px;
  box-sizing:border-box;
  background:#000;
  color:#fff;
}
.img {
  width:70%;
  background:url(https://i.picsum.photos/id/1074/1000/1000.jpg) center/cover;
}

<div class="container">
    <div class="box">
      some text here<br>
      some text here<br>
      some text here<br>
      some text here<br>
      some text here<br>
    </div>
    <div class="img"></div>
  </div>