透明文本如何添加不透明的文本阴影？

Question

我希望文字透明，使背景可见，但文字阴影不透明。我尝试过：

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

但是文字阴影也变成了透明的。

我想要的效果是这样的：

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

请帮忙。

- Raghavendra

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>

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

- vals

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

- Slawa Eremin

Answer 3

您可以使用CSS3属性text-shadow-blend-mode来实现这个目的。然而，它似乎还没有得到支持（Firefox 39.0完全忽略它）。

我也在苦苦挣扎着（半）透明文本轮廓。问题是，text-shadow并不真正生成轮廓，而是在其前景后面复制文本，并最终将其移动和模糊化。（任何颜色不是不透明的文本都会首先与自己的阴影混合在一起。）

目前，这可能无法使用CSS完成。

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

- Kyselejsyreček