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

Question

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

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

这里的问题是我无法修改背景（比如在这里做线性背景），因为背景不是单一颜色： My background

所以...我在这里。我已经能够达到这种状态： My state

通过使用这个：

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

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

感谢您的阅读，祝您愉快！

Answer 1

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,#0000 10%,#000);
}

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

<h1> some text</h1>

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

Is there a way to change the opacity of my text from the center in CSS?

css

gradient

opacity

css-mask