CSS圖像填充圖像中間具有透明元素的所有屏幕

Question

我有這種情況使用CSS。

我想要一個圖像在屏幕的中心，無論大小的屏幕，總是在中間。這很容易做到。

但是，我想要在中間的圖像（.png）是黑色的，並且在其中有一些透明字母。

所以，我希望整個屏幕是黑色的，但屏幕中間仍然有透明字母。

我想要透明字母的原因是因爲我在頁面加載時使用腳本來填充字母。這個想法是基於一個進度加載欄，但在這種情況下，使用字母作爲'酒吧'。

我該如何做到這一點？我已經嘗試用div來圍繞圖像，但這不是取決於屏幕尺寸的最佳方式，有些div可能無法到達圖像並留下空白區域。

你有什麼建議？我應該閱讀什麼？

萬一我沒有讓自己清楚，這裏是一個形象：

Answer 1

我目前能想到的，黑在屏幕居中img各地最好的選擇是使用box-shadow：

#main { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -250px 0 0 -250px; 
    box-shadow: 0 0 0 500px #000; 
}​ 

JS Fiddle demo。

當然，這需要瀏覽器支持box-shadow屬性（或至少一個供應商的前綴實現），並且還需要一個相當隨意的數字來模糊這個「擴散」。

不幸的是，而我寧願使用border屬性border影響佈局，必須在定位img進行補償，而box-shadow不影響頁面的佈局。

通過這個演示，顯然，background-color應該替換爲background-image或用於表示加載欄的其他選項。

Answer 2

所以，你想整個屏幕的黑色，但你必須要可以看到透明的信嗎？

如果我明白你想要什麼，你可以使背景顏色的身體（或html對象）變成黑色，保持圖像，但使用絕對定位在徽標後面直接放置白色（或彩色）圖像。

我想我不明白你爲什麼要透明字母，但黑色的背景。