有没有办法从 CSS 中心更改文本的不透明度？

问题描述

我目前想知道这是否可以改变我在 CSS 中的文本的不透明度......但是从中心开始，就像我可以给出一个点（比如我宽度的 50%）并将不透明度设为 0这个精确的点，并随着我们远离它而增加它。

这是我想要达到的结果： What I am expecting

这里的问题是我不能修改背景（就像在这里做线性背景一样），因为背景不是单一颜色： My background

所以……我来了。我已经能够达到这种状态： My state

通过使用：

-webkit-mask-image: -webkit-gradient(linear,left top,right top,from(rgba(0,1)),to(rgba(0,0)));

我想我离解决方案越来越近了，但我真的想知道是否有更简单/更常见的方法来做到这一点。

感谢您的阅读，祝您有美好的一天！

解决方法

mask 是您所需要的，但要考虑正确的梯度，在您的情况下，您需要一个 radial-gradient

h1 {
  margin:auto;
  display:table;
  color:#fff;
  font-size:50px;
  /* simply control the 10% */
  -webkit-mask:radial-gradient(circle farthest-side,#0000 10%,#000);
          mask:radial-gradient(circle farthest-side,#000);
}

html {
 min-height:100%;
 background:linear-gradient(45deg,red,blue);
}

<h1> some text</h1>

css-mask gradient opacity opacity