Div不透明。透明的文字。这可能吗？怎么做？

Question

这就是我想要做的

请帮助我，我认为这可能不起作用或者仅仅做不到

-webkit-text-fill-color: transparent; 

Answer 1

我知道这样做的最好方法是在容器元素和包含文本的元素上设置相同的背景。在这种情况下，您需要一个用于半透明黑色背景的中间包含元素。这就是我想出的：

＆＃13;

＆＃13;

div,
aside span {
  background-image: url(http://lorempixel.com/400/400/nature);
}
div {
  width: 400px;
  height: 400px;
}
aside {
  background: rgba(0, 0, 0, 0.7);
  width: 400px;
  height: 200px;
}
aside span {
  display: block;
  font-size: 3em;
  font-family: arial;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

＆＃13;

<div>
  <aside>
    <span>HERE IS SOME TEXT</span>
  </aside>
</div>

＆＃13;

＆＃13;

＆＃13;

所以神奇的是跨度的造型。你是在正确的轨道上，但我们需要在跨度上有这样的背景，所以我们可以将它剪辑到文本。

此解决方案仅适用于webkit！

Answer 2

Ty的答案，1 +来自我，但由于我希望背景完全独立于文本，我想出了这个简单的解决方案以及如何解决问题＆＃34;。< / p>

不是在div中创建文本，而是在GIF图像中创建，其中某些像素将是透明的（或者不存在实际像素）。