透明文字与不透明的文字阴影？

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>

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

Answer 2

如果你有扎实的背景，你可以这样试试：

http://jsfiddle.net/aKp3C/

<div class="content">
    <div class="text text1">
        Example text
    </div>
    <div class="text text2">
        Example text
    </div>
</div>



body{
    background-color: #333;
}

.content{
    position: relative;
}

.text{
    font-size: 25px;
    font-weight: bold;    
}

.text1{
    text-shadow: 3px 3px 3px orange;
}

.text2{
    position: absolute;
    left: 0;
    top: 0;
    color: #333;
}

Answer 3

您可以使用text-shadow-blend-mode CSS3属性来实现此目的。 但是，它似乎尚不支持（Firefox 39.0完全忽略它）。

我也在努力（半）透明的文字概述。问题是，text-shadow并没有真正生成轮廓，而是复制了前景背后的文本，并最终使其变化和模糊。 （任何颜色不透明的文本最初都会与自己的阴影混合在一起。）

目前，使用CSS可能无法实现这一点。

编辑：但是，您可能会发现涉及SVG及其stroke属性的有用this advice。