我试图淡化图像背景上的段落的白色文本,从白色透明。我有它在Chrome和Firefox中工作,但似乎无法让它在Safari中工作。适用于文本的透明线性渐变 - Safari中的bug
在我的示例中,您会注意到文本在Safari中不显示,但如果突出显示文本,它将显示。这里的jsfiddle:https://jsfiddle.net/ngaffer/fgxbfoL4/5/
<section>
<h3>Heading Three</h3>
<div class="hideContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem.</p>
</div>
</section>
<style>
section {
background-color: #111;
display: block;
overflow: hidden;
color: #fff;
}
.hideContent {
background: -webkit-linear-gradient(top, white 50%, rgba(255,255,255,0));
background: -o-linear-gradient(top, white 50%, rgba(255,255,255,0));
background: -moz-linear-gradient(top, white 50%, rgba(255,255,255,0));
background: linear-gradient(top, white 50%, rgba(255,255,255,0));
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255,255,255,0);
height: 100px;
}
</style>
您可以包括你如何希望它看起来像一个图像。看起来它会起作用,如果你删除'-webkit-background-clip'和'-webkit-text-fill-color'这两行。 –