如何让白色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

也将 #fff 设置为文本颜色

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

Answer 2

没有颜色值 transparent 但背景有。

对于您的布局，您可以只使用白色边框并将按钮的背景应用为透明。并为文本使用白色而不是透明颜色。

Answer 3

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

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>

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

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

html

css

transparency

background

background-image