CSS3不透明度渐变？

Question

我正在寻找 这样 的效果，但我的网站有一个动态的 background-color 。请注意，此示例使用白色叠加层，它不适用于不同的背景。

 p {
    width: 300px;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    position: relative;
}
p:after {
    content: "";
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

我希望做的是设置 CSS 不透明度渐变。 这种 工作，但代码太乱了。看看第二个例子，我可以在 jQuery 中实现它，但是有没有办法完全在 CSS 中做到这一点？

原文由 pgee70 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 CSS 中完成，但目前除了现代版本的 Chrome、Safari 和 Opera 之外，其他浏览器没有太多支持。 Firefox 当前仅支持 SVG 掩码。有关详细信息，请参阅 Caniuse 结果。

编辑：除 IE 之外的所有浏览器现在都支持此处提到的所有 mask- 属性。

CSS：

 p {
    color: red;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

诀窍是指定一个遮罩，它本身就是一个以不可见（通过 alpha 值）结束的渐变

查看具有坚实背景的演示，但您可以将其更改为任何您想要的。

演示

还要注意所有常用的 图像 属性都可用于 mask-image

 p  {
  color: red;
  font-size: 30px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-size: 100% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  }

div {
    background-color: lightblue;
}

 <div><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div>

现在，另一种方法可用，Chrome、Firefox、Safari 和 Opera 都支持这种方法。

这个想法是使用

mix-blend-mode: hard-light;

如果颜色为灰色，则提供透明度。然后，元素上的灰色叠加层创建透明度

 div {
  background-color: lightblue;
}

p {
  color: red;
  overflow: hidden;
  position: relative;
  width: 200px;
  mix-blend-mode: hard-light;
}

p::after {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background: linear-gradient(transparent, gray);
  pointer-events: none;
}

 <div><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div>

原文由 vals 发布，翻译遵循 CC BY-SA 4.0 许可协议