适用于文本的透明线性渐变 - Safari中的bug

我试图淡化图像背景上的段落的白色文本，从白色透明。我有它在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>

Image of the desired effect

来源

2017-07-17 ngaffer

您可以包括你如何希望它看起来像一个图像。看起来它会起作用，如果你删除'-webkit-background-clip'和'-webkit-text-fill-color'这两行。 –

我会避免这样做以此为支撑依然还没有。但是...

我能够加入到达到预期的效果：

-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0)1em, rgba(0, 0, 0, 1));

到文本类。 与-webkit前缀 -

可以通过增加/减小1em第一颜色后在梯度

测试和上工作铬59和FF 54控制褪色的量。我没有Safari但它应该被支持。

这不会在IE or Edge上工作，但仍然... 89％的支持不是太破旧。

section { 
 
    background-color: #111; 
 
    display: block; 
 
    overflow: hidden; 
 
    color: #fff; 
 
} 
 

 
.hideContent { 
 
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0)1em, rgba(0, 0, 0, 1)); 
 
    height: 100px; 
 
}

<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>

来源

2017-07-17 05:32:52

不幸的是，这不适用于Safari的要求。 – ngaffer

适用于文本的透明线性渐变 - Safari中的bug

回答

相关问题