透明背景上的透明字体

Question

透明背景上的透明字体

9

我目前正在开发一个滚动条，它看起来就像this。如果这段文字太长，请直接跳到示例！

在左右两侧会有箭头，可以向左或向右滚动。滚动条的颜色并不是灰色，而是rgba(0,0,0,0.6)。因此它是一种透明的黑色，将用于图像前面。

现在，我想让行中的最后几个字像this示例一样淡出。为了实现这一点，我使用了一个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+）。

- user4311599

2个回答

-1

很抱歉，我不能提供具有完整浏览器支持的解决方案。但是既然没有其他答案，也许它会有用。

首先，让我们创建一个基本的 div 元素来容纳半透明的颜色。在它上面，让我们设置一个带有文本的 div 元素。它被透明到灰色的渐变图层遮盖。这使得该 div 元素的右侧全部为灰色。关键在于为该 div 元素设置混合模式为 hard-light。这将使灰色行为像透明，保持黑色不变。

#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>

- vals

谢谢您的提议，尽管由于浏览器支持的原因，我不会使用它。 - user4311599

我不喜欢你不把“id”属性看作唯一值的方式。应该使用“class”，而不是“id”。 - Patrick Roberts

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Persijn · Accepted Answer

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>