透明背景上的透明字体

Question

我目前正在开发一个看起来像 this 的滚动条。 如果您觉得本文太长，请跳至示例！

左右两侧会有箭头，可以向左或向右滚动。滚动条的颜色不是看起来的灰色而是 rgba(0,0,0,0.6)。所以它是透明的黑色，将在图像前面使用。

现在我希望行中的最后几个字母像 this 示例中那样淡出。为此，我使用 div 叠加层：

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

但是如果我用透明的滚动菜单这样做，它会弄乱滚动菜单的背景颜色（如果您不明白我的意思，请看 here）。

所以我找到了一个解决方案，将两个 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

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

首先，让我们创建一个底色 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>

Answer 2

过滤器正是您所需要的。
IE9 毁了你的一天CAN I USE IT?

现在要调整滤镜，只需更改 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>

透明背景上的透明字体

Transparent font on transparent background

css

fonts

transparency

overflow