Transparent text with a border html/css

So I have been searching, and maybe I am not searching correctly or the answers aren't making sense to me. I want to have completely transparent text with a visible border around it.

So far, this is what I have:

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

The problem with this is lowering the opacity to allow the background through is also drastically reducing the border making the text harder to read. I know that doing this will make it difficult anyway, but the fading border is not helping. Any help on this is greatly appreciated!

Solution

Use rgba() value for the color property.

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>

Or you could use a :pseudo-element.

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>

Or you could use 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>