背景を表示するために白い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>

Answer 2

設定#fffも

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

Answer 3

テキストの色には色の値がtransparentありませんが、背景はありません。

レイアウトでは、白​​い色を使用して境界線を使用し、ボタンの背景を透明に適用できます。透明ではなくテキストの色を白にします。私は次のように何かを期待していると思います