有没有办法从子元素中转义clip-path：？即相对于裁剪的背景定位的图像也会被裁剪
有没有办法从子元素中转义clip-path：？即相对于裁剪的背景定位的图像也会被裁剪
提问于 2019-02-21 06:22:10
我正在尝试将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>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-21 06:35:20
您需要考虑另一种选择，因为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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54796153
复制相关文章
相似问题
腾讯云开发者
