正如我在评论中提到的那样,当您在另一个渐变的顶部添加透明层时,它将仅通过其下方的彩色渐变层显示(而不显示容器中存在的图像)。因此,使用渐变来实现此目标将非常困难(几乎不可能)。
您必须使用遮罩图像来实现它。以下是使用SVG蒙版的代码段。
div {
position: relative;
height: 300px;
width: 500px;
}
div svg {
position: absolute;
height: 100%;
width: 100%;
}
div .grad-fill {
fill: url(#grad);
mask: url(#masker);
}
<div>
<svg viewBox="0 0 500 300" preserveAspectRatio="none">
<defs>
<linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(270,0.5,0.5)">
<stop offset="0%" stop-color="rgba(198,83,165,.95)" />
<stop offset="100%" stop-color="rgba(198,86,51,.95)" />
</linearGradient>
<linearGradient id="mask-grad" gradientUnits="objectBoundingBox">
<stop offset="40%" stop-color="black" />
<stop offset="100%" stop-color="white" />
</linearGradient>
<mask id="masker" x="0" y="0" width="500" height="300">
<rect x="0" y="0" width="500" height="300" fill="url(#mask-grad)" />
</mask>
</defs>
<rect x="0" y="0" width="500" height="300" class="grad-fill" />
</svg>
<img src="http://lorempixel.com/500/300/animals/8" />
</div>
您可以在以下链接中找到有关SVG蒙版的更多信息:
这也可以使用纯CSS来完成,但是不幸的mask-image
是,当前只有WebKit浏览器支持该属性,因此不建议使用此方法。
div {
position: relative;
height: 300px;
width: 500px;
color: white;
}
div:after,
img {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
div:after {
content: '';
background-image: linear-gradient(0deg, rgba(198, 83, 165, .95) 0%, rgba(198, 86, 51, .95) 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 40%, rgb(0, 0, 0) 100%);
}
<div>Some text
<img src="http://lorempixel.com/500/300/animals/8" />
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句