html - 有没有办法逃避剪辑路径 : from child elements? 相对于剪辑背景定位的 I.E 图像也被剪辑

Question

我正在尝试将 SVG 图像定位在与另一个背景有视差的裁剪背景上。我希望 SVG 一半在背景上，一半在前景上，但它会使用剪辑路径与背景一起剪辑。是否有另一种方法可以用于在不剪切 SVG 的情况下工作的效果，或者是否有禁用继承效果的方法？请记住，我想让它相对于这个背景定位。

有问题的 CSS

.content
{
  height: 300vh;
  min-height: 150vh;
  background: #25282A;
  clip-path: polygon(-400% 100%, 100% 100%, 100% 10%);
  position: relative;
  z-index: 1;
}
.content img{
  position: relative;
  top: 20vh;
  left: 2vw;
  z-index: 3;
}

HTML

 <section class="content">
          <img src="/Asssets/RWR food image.jpg">
         <img src="/Assets/Title.svg" />
        </section>

Answer 1

您需要考虑另一种选择，因为 clip-path 将剪辑元素及其所有内容。

由于它是关于背景的，您可以像下面那样依靠渐变来创建类似的效果。

.content {
  height: 300vh;
  min-height: 150vh;
  background: 
    /*a triangle shape offested by 50px from the top taking 25% of the height*/
    linear-gradient(to bottom right,transparent 49.8%,#25282A 50%) 0 50px/100% 25%,
    /*fill the remaining (75% - 50px) with solid color*/
    linear-gradient(#25282A,#25282A) bottom/100% calc(75% - 49px);
  background-repeat:no-repeat;
}

<div class="content">

</div>