透明文字带边框的HTML/CSS

Question

我一直在搜索，可能是我没有正确搜索或者答案对我来说不够清晰。我想要完全透明的文本，并且周围有一个可见的边框。

到目前为止，这是我所拥有的：

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

这样做的问题是降低不透明度以允许背景透过也会大幅减少边框，使文本更加难以阅读。我知道这样做无论如何都会很困难，但渐变边框并没有起到帮助作用。非常感谢您对此的帮助！

- Chris Storz

Answer 1

在color属性中使用rgba()的值。

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>

- Weafs.py

---

第三个选项更接近我想要的效果，而第一和第二个都会使背景变得更暗并完全隐藏背景。就像你的第三个选项一样，我想透过字母看到背景，但我想让它完全清晰，而不是看起来像磨砂玻璃。不幸的是，SVG 给我的基本上已经有了。 - Chris Storz

@ChrisStorz - 只需将 fill-opacity 更改为 0 即可。 - Weafs.py

@ChrisStorz - 顺便说一下，你也可以使用stroke-width属性来更改边框的宽度。 - Weafs.py

太棒了！谢谢Chip！稍微调整一下，我就能得到我想要的东西了！ - Chris Storz

@ChrisStorz - 不用谢。 :) - Weafs.py