適用於文本的透明線性漸變 - 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

回答

相關問題