How to make a text stroke with transparent text
我找到了这个解决方案:轮廓效果到文本
哪个很棒,但是是否可以使文本透明并且仅绘制轮廓?
例如,这会发生在框阴影中,即使框没有背景,您也不会在框"下方"看到阴影。 但是对于文本来说,如果它是透明的,那么您会抓住类型的整个阴影。
是否可以只获得带有透明文本的轮廓?
编辑:
问题是对于不支持-webkit-text-outline的浏览器会有一个很好的后备,因为它们不会绘制轮廓,并且会使文本不可见...
您可以使用内嵌svg的文本笔触来获得透明文本。
您可以使用元素(有关MDN的更多信息),将fill属性设置为none或transparent以使文本透明,并使用stroke porperty来使文本轮廓。 stroke-width和stroke-color可以定义文本笔触的粗细和颜色
这是一个示例:带有白色笔触的透明文本和通过文本显示的背景图像:
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> |
-
@Vandervals这是错误的。它是响应式的,可以由Google索引,并且可以像普通html一样进行选择。 (自2010年起)
-
@Vandervals,我想补充一点,它对浏览器的支持远超过text-stroke
-
似乎是更好的选择,因为text-stroke是一个非官方的扩展,已从w3c规范中删除(因此,在以后的更新中可能会在chrome等中删除)
-
问题是,这不是CSS解决方案...如果您将SVG引入CSS中编码为base64,会发生什么情况?
-
你为什么想这么做?您不能编辑html吗?
-
称我为新手或清教徒,但我喜欢将样式和内容分开
-
@Vandervals可以在CSS文件中指定所有样式(stroke-width stroke fill font-size font-family...),并仅将内联SVG的内容保留在HTML中。这样,您可以分离样式和内容。这是一个示例:jsfiddle.net/7goyzfwL/2
-
我可以在此文字上使用自动换行吗?
-
@ChiBui不,自动换行在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;
}
} |
-
没有这个的Moz和MS版本吗?因为这样做的问题是您不能说:"如果您不使用webkit,请不要将颜色显示为透明"(否则,它的响应速度会很慢)。当然,您可以使用js进行检查并将其作为特定类包括在内,但是是否只有CSS解决方案?
-
您可以为此使用媒体查询,例如@media screen and (-webkit-min-device-pixel-ratio:0)。
-
我认为现在有一个半标准text-stroke吗?
-
@rogerdpack是的,确实,现在似乎很标准:caniuse.com/#feat=text-stroke
我终于找到了对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)中实现了一段时间,因此可以使用它。
-
我想这完全取决于您的浏览器受众。与caniuse.com/#search=svg比较caniuse.com/#feat=css-featurequeries
-
当然!它取决于样式对您的样式有多重要,但这对于解决其他规则问题也似乎是一个绝妙的技巧。
-
结合浏览器对这两个属性的支持,这只会在chrome Opera和android浏览器中显示文本笔画
-
@ web-tiki再看一次。笔划将始终显示为笔划或文本阴影,但更改后的字体将为透明或白色。最好的是,如果是图像,则可以匹配背景颜色或常规颜色。
-
@Vandervals不会误会我的意思,我说的是text-stroke属性只在那些浏览器中显示。其他人将显示您所说的文本阴影。
-
但是有什么意义呢?不是我要求的后备吗?我认为您的回答也很好(出于设计目的肯定会更好),但是可以以任何方式在CSS上引入它吗?
-
@Vandervals,您在我回答后编辑了后备部分。我了解您会保持风格和内容分离的意愿,但是对于此特定任务,使用svg方法对浏览器的支持要好得多。我怀疑以base64编码的svg中的文本是否会被Google索引,因为它会被视为background-image,因此我不推荐它。但是你可以做到这一点jsfiddle.net/webtiki/j04nz9yd