In my example you'll notice that the text does not display in Safari but if you highlight the text it will appear. JSFiddle here: 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> 所需效果的图像推荐答案我将避免这样做,因为该支持尚不存在.但是...I would avoid doing this as the support is still not there yet. but...我可以通过添加以下内容来达到预期的效果:I am able to achieve the desired effect by adding:-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0)1em, rgba(0, 0, 0, 1));到文本类.您可以通过在渐变中的第一种颜色之后增加/减少1em来控制淡入量You can control the amount of fade by increasing / decreasing the 1em after the first color in the gradient已测试并在带有-webkit前缀的 Chrome 59 和 FF 54 -上工作.我没有 Safari ,但应该支持它.Tested and working on Chrome 59 and FF 54 - with the -webkit prefix. I don't have Safari but it should be supported.这不适用于 IE或Edge ,但仍然... 89%支持不是太简陋.This won't work on IE or Edge but still...89% support is not too shabby.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> 这篇关于应用于文本的透明线性渐变-Safari中的错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!