带边框的透明文本 html/css
Transparent text with a border html/css
所以我一直在搜索,也许我没有正确搜索或者答案对我来说没有意义。我想要完全透明的文本,周围有可见的边框。
到目前为止,这是我拥有的:
{
font-family: Arial Black,Arial Bold,Gadget,sans-serif;
color: white;
opacity: 0.4;
font-size: 80px;
margin-left: 25px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
这样做的问题是降低不透明度以允许背景通过也大大减少了边框,使文本更难阅读。我知道这样做无论如何都会变得困难,但褪色的边界无济于事。非常感谢对此的任何帮助!
使用 rgba()
值作为 color
属性。
div {
font-family: Arial Black, Arial Bold, Gadget, sans-serif;
color: rgba(255, 255, 255, 0.4);
font-size: 80px;
margin-left: 25px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<div>Some text</div>
或者您可以使用 :伪元素。
div {
position: relative;
font-family: Arial Black, Arial Bold, Gadget, sans-serif;
font-size: 80px;
margin-left: 25px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
div:after {
position: absolute;
top: 0;
left:0;
content: 'Some text';
width: 100%;
height: 100%;
font-family: Arial Black, Arial Bold, Gadget, sans-serif;
color: white;
opacity: 0.4;
font-size: 80px;
z-index: 1;
pointer-events: none;
}
<div>Some text</div>
或者您可以使用 svg
.
body, html {
height: 100%;
margin: 0;
background: url(http://lorempixel.com/500/200/) no-repeat;
}
<svg width="400" height="100">
<text fill="white" fill-opacity="0.4" font-size="80" x="200" y="70" text-anchor="middle" stroke="black">Some Text</text>
</svg>
所以我一直在搜索,也许我没有正确搜索或者答案对我来说没有意义。我想要完全透明的文本,周围有可见的边框。
到目前为止,这是我拥有的:
{
font-family: Arial Black,Arial Bold,Gadget,sans-serif;
color: white;
opacity: 0.4;
font-size: 80px;
margin-left: 25px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
这样做的问题是降低不透明度以允许背景通过也大大减少了边框,使文本更难阅读。我知道这样做无论如何都会变得困难,但褪色的边界无济于事。非常感谢对此的任何帮助!
使用 rgba()
值作为 color
属性。
div {
font-family: Arial Black, Arial Bold, Gadget, sans-serif;
color: rgba(255, 255, 255, 0.4);
font-size: 80px;
margin-left: 25px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<div>Some text</div>
或者您可以使用 :伪元素。
div {
position: relative;
font-family: Arial Black, Arial Bold, Gadget, sans-serif;
font-size: 80px;
margin-left: 25px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
div:after {
position: absolute;
top: 0;
left:0;
content: 'Some text';
width: 100%;
height: 100%;
font-family: Arial Black, Arial Bold, Gadget, sans-serif;
color: white;
opacity: 0.4;
font-size: 80px;
z-index: 1;
pointer-events: none;
}
<div>Some text</div>
或者您可以使用 svg
.
body, html {
height: 100%;
margin: 0;
background: url(http://lorempixel.com/500/200/) no-repeat;
}
<svg width="400" height="100">
<text fill="white" fill-opacity="0.4" font-size="80" x="200" y="70" text-anchor="middle" stroke="black">Some Text</text>
</svg>