我试图将SVG图像放置在剪裁背景上,该图像在另一个背景上可视上可视性。我希望SVG在背景上占一半,而前景则一半,但是使用夹子路径将其与背景夹住。我是否可以使用另一种方法来无需剪切SVG,还是可以禁用继承效果的方法?请记住,我想保持与此背景相对的位置。
css中的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
将夹住元素及其所有内容。
由于与背景有关,因此您可以依靠以下梯度来创建类似的效果。
.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>