如何使用像素化叠加 (html/css) 制作文本？

Question

我有一个 h1 标签，我最初想要一个像素化的叠加层，就像这样

当我结束它时，我希望它淡出过渡以使实际文本可见。

有谁知道我如何用 html 和 css 实现这个？

我试过使用 text-shadow css 属性，但这只会让它变得模糊，而不是像素化。

Answer 1

我不认为 CSS 可以实现文本像素化。我得到的最接近的是这些：

  h1{
    position: relative;
    text-transform: uppercase;
  }
  h1::after{
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 480px;
    height: 40px;
    background: url('https://img.freepik.com/free-vector/grey-pixelated-pattern_1053-169.jpg') no-repeat;
    transition: all .2s ease-in;
  }
  h1:hover::after{width: 0;}

<h1>Never gonna give you up</h1>

这个有背景剪辑：

h1{
  font-size: 50px;
  text-transform: uppercase;
  width: max-width;
  background: url('https://img.freepik.com/free-vector/grey-pixelated-pattern_1053-169.jpg');
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  h1:hover{
  -webkit-text-fill-color: unset;
  background: none;
  }

<h1>Never gonna give you up</h1>