有一个块，其中接近末尾的文本逐渐消失。这是使用以下方法完成的::after，给定linear-gradient从透明色到背景色。
最近注意到，在当前版本的浏览器中，除了 safari 之外，一切都很好（在第 11 版中，情况太糟糕了）。 Autoprefix 不是解决方案（他在这里并且不需要）。
My code:
* {
margin: 0;
padding: 0;
}
body {
display: flex;
min-height: 100vh;
}
p {
margin: auto;
width: 40vw;
height: 40vh;
max-width: 300px;
max-height: 300px;
overflow: hidden;
position: relative;
}
p::after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background-image: linear-gradient(transparent 0, white 100%);
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel urna efficitur, tempor felis eu, lacinia sem. Nulla lacinia tincidunt turpis, faucibus luctus leo. Mauris lobortis orci lacus, vel luctus leo venenatis ac. Phasellus feugiat urna sit
amet nisi dapibus, a dignissim nibh dignissim. Suspendisse vel tempor nisl. Pellentesque hendrerit, nibh non vehicula finibus, turpis tellus auctor purus, ac placerat magna elit vel mauris. Nullam viverra venenatis enim. Vivamus odio lectus, maximus
quis dolor et, lobortis ullamcorper velit. Nulla fringilla ligula a metus faucibus commodo non ac lectus. Aenean bibendum arcu eu nibh convallis ornare.</p>
决定更换transparent with rgba(255,255,255,0)。但这是不正常的行为，在我看来是一种拐杖。
有任何想法吗？
我不知道使用有什么缺点RGBA(255, 255, 255, 0)如果这对你有用，我认为你应该使用它。这是更好的方法，因为它不依赖于浏览器来确定哪个是不透明度为 0 的颜色，例如transparent关键字确实如此。
您遇到的问题是由于最新版本的 Safari 认为颜色所代表的颜色transparent is gray其他大型浏览器认为它与元素的背景颜色相同，在您的情况下是white.
为了防止意外行为（例如渐变），当前的 W3C 规范规定应在阿尔法预乘 https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax色彩空间。然而，请注意，一些较旧的浏览器可能会将其视为 alpha 值为 0 的黑色，显然最新版本的 Safari 也做了类似的事情。
回答OP的评论：
不存在无色透明这样的东西，渐变的例子完美地展示了这一点。
例如，Mozilla 的 MDN Web 文档说：
透明关键字代表完全透明的颜色。这
使背景完全可见。从技术上讲，透明是
rgba(0,0,0,0) 的快捷方式。
该关键字代表一种颜色，虽然是完全透明的，但仍然是一种颜色。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
