CSS3 - Transparent text through `div`? - css

Question

I was looking for this.
But when I tried it, it won't work.
The text is transparent, but not through the div, which is the big idea.
Fiddle
.title1_background {
background-color: rgba(255, 255, 255, 0.8);
height: 20%;
width: 100%;
position: fixed;
bottom: 8%;
margin: 0;
left: 0;
text-align: center;
}
.title1_background h1 {
font-size: 400%;
display: block;
-webkit-text-fill-color: transparent;
}

Answer 1

The better way is to use two images.
The background image and the image with hollow text above it.
You can achieve the same using -webkit-text-fill-color: transparent; but this would only work with browsers supporting -webkit.
see this link it works fine in chrome since it supports -webkit but won't work in firefox.
See the browsers and their versions that support -webkit
We should always prefer to design and develop that supports cross browser compatibility.

Answer 2

Try This link
<div id="outer">
<div id="wrapper">
<div id="inner">TEXT</div>
</div>
CSS
#outer {
width:300px;
height:300px;
background-image: url(http://www.placekitten.com/300/300);
overflow:auto;
}
#wrapper {
background: #fff;
margin: 100px 0;
opacity:0.6;
}
#inner {
font: bold 60px Arial;
text-align:center;
margin:20px;
background-color: #fff;
background-image: url(http://www.placekitten.com/300/300);
background-position: 280px 201px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#outer:hover{
border:solid 2px #4072B4;
}