How to make TEXT in a white div fully transparent so as to show the background?

Question

What I am trying to do is that in a div with a white opaque background, I want the text to be fully transparent so that it can show the body's background.

This is my source code so far:

body, html {
  color: #FFF;
  height: 100%;
  width: 100%;
  margin: 0;
  top: 0;
  left: 0;
  font-family: Arial;
  background: url(http://forums.windowscentral.com/attachments/windows-10/104338d1431267538t-windows-spotlight-lockscreen-96-.jpg) center fixed;
  background-size: cover;
}
.center {
  position: absolute;
  display: inline-block;
  padding: 15px;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 400px;
  font-size: 30px;
  line-height: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -215px;
  background: rgba(255,255,255,.5);
}

<div class="center">
  Lorem ipsum dolor sit amet.
</div>

What I am trying to do is to make the text invisible and show the palm trees wallpaper, and also to make the div's background white.

I have tried:

.center {
color: transparent;
background-color: #FFF;
}

But it only makes both the text and the background white.

Example of what I am trying to achieve:

Focus only on the button (imagine that's the div) that has a white background. Imagine that the blue color (of both the body background and the text) is the background image.

Is this possible using just CSS and HTML? I don't mind javascript or jquery though.

---

Nevermind, thanks to @JokerFan, I have found a solution here.

Note: This only works in webkit browsers.

Answer 1

I think you are expecting something as follows,

body, html {
  color: #FFF;
  height: 100%;
  width: 100%;
  margin: 0;
  top: 0;
  left: 0;
  font-family: Arial;
  background: url(http://forums.windowscentral.com/attachments/windows-10/104338d1431267538t-windows-spotlight-lockscreen-96-.jpg) center fixed;
  background-size: cover;
}
.center {
  position: absolute;
  display: inline-block;
  padding: 15px;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 400px;
  font-size: 30px;
  line-height: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -215px;
  background: rgba(255,255,255,1);
}
span {
  background: url(http://forums.windowscentral.com/attachments/windows-10/104338d1431267538t-windows-spotlight-lockscreen-96-.jpg) center fixed;
  background-size: cover;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display:block;
}

<div class="center">
  <span>  Lorem ipsum dolor sit amet.</span>
</div>