有没有一种方法可以从子元素中逃脱clip-path:相对于裁剪背景放置的I.E图像也会被裁剪 [英] Is there a way to escape clip-path: from child elements? I.E images positioned relative to the clipped background, also get clipped
问题描述
我正在尝试将SVG图像放置在裁剪后的背景上,该背景在另一个背景上视差.我希望SVG在背景的一半在前景的一半,但是它会使用剪切路径与背景一起被剪切.我是否可以使用另一种方法来实现无需剪切SVG的效果,或者是否有办法禁用继承的效果?请记住,我想保持它相对于此背景的位置.
I am trying to position an SVG image over a clipped background that parallaxes over another background. I want the SVG to be half over the background and half over the foreground, but it gets clipped along with the background using clip path. Is there another method i could be using for the effect that would work without clipping SVG, or are there ways to disable the inherited effect? Bear in mind, I would like to keep it positioned relative to this background.
有问题的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>
推荐答案
您需要考虑另一种选择,因为clip-path
将剪切元素及其所有内容.
You need to consider another alternative as clip-path
will clip the element and all its content.
由于它是关于背景的,因此您可以像下面一样依靠渐变来创建类似的效果.
Since it's about background, you can rely on gradient like below to create a similar effect.
.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>
这篇关于有没有一种方法可以从子元素中逃脱clip-path:相对于裁剪背景放置的I.E图像也会被裁剪的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!