我希望文字透明,使背景可见,但文字阴影不透明。我尝试过:
opacity:0;
text-shadow 3px 3px 3px orange;
但是文字阴影也变成了透明的。
我想要的效果是这样的:
http://blog.tmimgcdn.com/wp-content/uploads/2011/07/Glowing-Polkadots-Text-Effect.jpg?9d7bd4
请帮忙。
我希望文字透明,使背景可见,但文字阴影不透明。我尝试过:
opacity:0;
text-shadow 3px 3px 3px orange;
但是文字阴影也变成了透明的。
我想要的效果是这样的:
http://blog.tmimgcdn.com/wp-content/uploads/2011/07/Glowing-Polkadots-Text-Effect.jpg?9d7bd4
请帮忙。
.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>
<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;
}
您可以使用CSS3属性text-shadow-blend-mode
来实现这个目的。然而,它似乎还没有得到支持(Firefox 39.0完全忽略它)。
我也在苦苦挣扎着(半)透明文本轮廓。问题是,text-shadow
并不真正生成轮廓,而是在其前景后面复制文本,并最终将其移动和模糊化。(任何颜色不是不透明的文本都会首先与自己的阴影混合在一起。)
目前,这可能无法使用CSS完成。
编辑:但是,您可能会发现this advice有用,其中涉及SVG及其stroke
属性。