css - 带有不透明文本阴影的透明文本？

Question

我想要透明文本，背景应该是可见的，但文本阴影应该是不透明的。我试过:

opacity:0;
text-shadow 3px 3px 3px orange;

但文字阴影也变得透明。

我想要这样的结果:

http://blog.tmimgcdn.com/wp-content/uploads/2011/07/Glowing-Polkadots-Text-Effect.jpg?9d7bd4

请帮忙。

Answer 1

您可以使用混合模式选项在现代浏览器(Chrome、Safari 和 FF)中获得此效果

.test {
  font-size: 360px;
  position: relative;
  border: solid 1px;
  display: inline-block;

  margin: 5px;
  text-shadow: orange 10px 0px 30px, orange -10px 0px 30px, orange 0px 10px 30px, orange 0px -10px 30px;
  color: black;
  background: black;
  mix-blend-mode: screen;
}

body {
  background-image: url(http://i.stack.imgur.com/08Y1e.jpg);
  }

<div class="test">STAR FIELD</div>

我上传了背景图片以避免链接出现问题