1

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

这是我想要达到的结果： 我期待什么

这里的问题是我不能修改背景（比如在这里做一个线性背景的东西），因为背景不是单一颜色： 我的背景

所以……我来了。我已经能够达到这个状态： 我的状态

通过使用这个：

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

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

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

4

1 回答 1

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>

于 2021-07-21T19:20:48.987 回答