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:

\n

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.

---

Note: This only works in webkit browsers.

Answer 1

Set #fff to text color also

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

Answer 2

There's no color value the transparent but background does.

For you layout, you can just use border using white color and apply the background of the button as transparent. And use color white for the text instead of transparent.

Answer 3

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>