也许你知道如何制作如图所示的透明区域,我附上了什么?我尝试使用蒙版图像,但没有得到必要的结果。所以,在那里你可以看到 Vector 和它的透明,你可以在它的图中看到背景城市。你能帮我创建它吗。
const Wrapper = styled.div`
background-image: url(${city});
background-size: cover;
background-repeat: no-repeat;
display: flex;
width: 1200px;
height: 400px;[enter image description here][1]
margin: 20px;
position: relative;
/* &::before {
content: "";
background-image: url(${HeaderVector});
} */
`;
const LinearGradient = styled.div`
background: linear-gradient(
116.44deg,
rgba(114, 182, 59, 0.78) 40.41%,
rgba(114, 182, 59, 0) 89.27%
);
`;
const MaskImage = styled.div`
display: inline-block;
background-image: url(${HeaderVector});
background-repeat: no-repeat;
background-size: cover;
width: 600px;
height: 500px;
&::after {
content: "";
mask-image: url(${HeaderVector});
position: absolute;
top: 0;
right: 0;
width: 600px;
height: 500px;
}
`;
const Container = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
`;
const TextContent = styled.div`
margin: 98px 20px 30px 20px;
`;