透明背景上的透明字体

Question

我目前正在开发一个看起来像这样的滚动条。 如果这篇文章很长，你只需跳到示例！

左侧和右侧将有箭头向左或向右滚动。 滚动条的颜色看起来不是灰色的，而是rgba（0,0,0,0.6）。 因此它是一个透明的黑色，将用于图像前面。

现在我希望该行中的最后几个字母在此示例中淡出。 要实现这一点，我使用div覆盖：

background-image: linear-gradient(to right, rgba(255,255,255,0), black)

但是如果我用透明的滚动菜单来做，那就会搞乱滚动菜单的背景颜色（如果你不知道我的意思，请看这里 ）。

所以我找到了一个解决方案，它将两个div与最右边的线性渐变相结合，如果你将它们叠放在一起，就可以精确地创建滚动菜单的背景颜色。 其中一个位于字体后面，其中一个覆盖了字体。 这样我就可以在字体上实现一些透明度。 这是你们的一个例子：

 #rightPart, #leftPart{ width:200px; height:50px; position:absolute; top:0;left:0; color: white; } #rightPart{ z-index:-1; background:linear-gradient( to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } #leftPart{ background:linear-gradient( to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } 

 <div id="rightPart"> Slight Transparency effect on this </div> <div id="leftPart"></div> 

问题是透明效果仅限于0.5的背景透明度。 因此，透明效果不能像我希望的那样强烈。

现在我要求一个解决方案，我可以用它来实现更强的透明效果。 我很感激你的建议。

请记住，我不能只在最后透明地创建一个特定的单词，因为在滚动条的末尾总会有一个不同的单词！ 因此，我需要使字体本身在特定区域透明。 我个人不知道该怎么做（特别是如果它应该适用于所有最新的浏览器版本 - 包括IE9 +）。

Answer 1

<svg>过滤器正是您所寻求的。
IE9在这里毁了你的一天我可以使用它吗？

现在要调整过滤器，只需更改linearGradiant中停止元素的偏移量。
offset以确定效果发生的位置
stop-color和stop-opacity以确定效果应该是什么

 example: <br> <svg height="40" width="200" viewbox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="endfade" x1="0%" y1="0%" x2="100%" y2="0"> <stop offset="50%" stop-opacity="1" /> <stop offset="90%" stop-opacity="0" /> </linearGradient> </defs> <text id="spesial" fill="url(#endfade)" x="0" y="15">Your text here</text> </svg> <br>Color? <br> <svg height="40" width="200" viewbox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="pinkblue" x1="0%" y1="0%" x2="100%" y2="0"> <stop offset="25%" stop-opacity="1" stop-color="pink" /> <stop offset="50%" stop-opacity="1" stop-color="aqua" /> <stop offset="90%" stop-opacity="0" stop-color="aqua" /> </linearGradient> </defs> <text id="spesial" fill="url(#pinkblue)" x="0" y="15">Your text here</text> </svg> 

Answer 2

好吧，我无法提供完全支持浏览器的解决方案。 但由于没有任何其他答案，可能会有用

首先，让我们创建一个基本div，它将保持半透明颜色。 在它上面，让我们用文本设置div。 由透明到灰色的渐变覆盖。 这使得div的右侧完全变灰。 诀窍是为这个div设置一个混合混合模式的强光。 这使得灰色表现为透明，黑色保持黑色

 #base { left: 0px; width: 200px; height: 50px; position: relative; background: rgba(0,0,0,0.5); } #text { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; mix-blend-mode: hard-light; } #text:after { content: ""; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background: linear-gradient(90deg, transparent 30%, gray 80%); } #base:nth-child(2) { background: rgba(0,0,0,0.25); } #base:nth-child(3) { background: rgba(0,0,0,0.125); } 

  <div id="base"> <div id="text"> Slight Transpareny effect on this </div> </div> <div id="base"> <div id="text"> Slight Transpareny effect on this </div> </div> <div id="base"> <div id="text"> Slight Transpareny effect on this </div> </div>