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

Question

这就是我想做的

请帮帮我，我认为这可能行不通，或者这还不够

-webkit-text-fill-color: transparent; 

Answer 1

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

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;
}

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

所以神奇的是跨度上的样式。您走在正确的轨道上，但我们需要在 span 本身上放置该背景，以便我们可以将其剪辑到文本中。

此解决方案仅适用于 webkit!