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设置一个混合混合模式的强光。这使得灰色表现为透明，将黑色保持为黑色

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

透明背景上的透明字体

1 个答案: