关于CSS：如何使用透明文字制作文字笔触


How to make a text stroke with transparent text

我找到了这个解决方案：轮廓效果到文本
哪个很棒，但是是否可以使文本透明并且仅绘制轮廓？
例如，这会发生在框阴影中，即使框没有背景，您也不会在框"下方"看到阴影。 但是对于文本来说，如果它是透明的，那么您会抓住类型的整个阴影。
是否可以只获得带有透明文本的轮廓？

编辑：
问题是对于不支持-webkit-text-outline的浏览器会有一个很好的后备，因为它们不会绘制轮廓，并且会使文本不可见...

您可以使用内嵌svg的文本笔触来获得透明文本。

您可以使用元素(有关MDN的更多信息)，将fill属性设置为none或transparent以使文本透明，并使用stroke porperty来使文本轮廓。 stroke-width和stroke-color可以定义文本笔触的粗细和颜色

这是一个示例：带有白色笔触的透明文本和通过文本显示的背景图像：

Transparent text with stroke and background image

1
2
3
4
5
body {
  background: url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size: cover;
}
svg{width:100%;}
1
2
3
<svg viewbox="0 0 10 2">
  <text x="5" y="1" text-anchor="middle" font-size="1" fill="none" stroke-width=".015" stroke="#fff" font-family="sans-serif">Text stroke</text>
</svg>

相关讨论

好吧，使用CSS3是可行的，但只能使用某些浏览器前缀。组合color: transparent将生成您要查找的内容。

例如：

1
2
3
4
5
span {
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

jsFiddle演示

值得注意的是，text-stroke-*的使用仍然受到限制。请参阅我可以使用。

如果您想要一个很好的后备，可以使用媒体查询：

1
2
3
4
5
@media screen and (-webkit-min-device-pixel-ratio:0) {
    span {
        color: #000;
    }
}
相关讨论

我终于找到了对Webkit笔触问题的响应：

1
2
3
4
5
6
7
8
9
10
11
span{
    color: white;
    text-shadow: 1px 1px black, -1px -1px black;
}
@supports(-webkit-text-stroke: 1px black){
    span{
        color: transparent;
        -webkit-text-stroke: 1px black;
        text-shadow: none;
    }
}

由于@supports已在大多数Webkit浏览器(例如chrome和Opera)中实现了一段时间，因此可以使用它。

相关讨论