html - 如何使白色div中的TEXT完全透明以显示背景？

Question

我想要做的是，在具有白色不透明背景的 div 中，我希望文本完全透明，以便它可以显示正文的背景。

到目前为止，这是我的源代码:

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>

我想做的是让文本不可见并显示棕榈树墙纸，同时将 div 的背景设为白色。

我试过:

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

但这只会使文本和背景变白。

我正在努力实现的示例:

只关注具有白色背景的按钮(假设它是 div)。想象一下，蓝色(正文背景和文本)是背景图像。

仅使用 CSS 和 HTML 是否可行？不过我不介意 javascript 或 jquery。

---

没关系，感谢@JokerFan，我找到了解决方案here .

注意:这只适用于 webkit 浏览器。

Answer 1

我想你期待的是如下内容，

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>