顯示CSS中不透明度的內容

我在包裝類中應用了opacity，我想在我的頁面上顯示加載圖像。加載圖像被放置在包裝內，並調整了opacity。由於這個原因，加載圖像沒有清晰顯示。我想清楚地顯示加載圖像，沒有不透明。有人請讓我知道我該怎麼做？顯示CSS中不透明度的內容

#wrapper{ 
    opacity:0.21; 
    width:100%; 
    height:100%; 
} 
#loading{ 
    background-image:url('loading.gif'); 
    width:200px; 
    height:20px; 
    z-index:10px; 
    position:fixed; 
    top:50%; 
    left:50%; 
}

來源

2012-10-05 Ankpro Two

您是否也要添加您的html代碼？ – VKen

我只能想到做到這一點的兩種方法已經得到解答。請記住，由於RGBA兼容性，兩種不同div的解決方案將適用於所有瀏覽器，並且RGBA的解決方案不會。 – Derik

如果背景是純色，使用rgbabackground-color代替opacity：

background-color: rgba(255, 255, 255, 0.21); /* white, 0.21 opacity */

的上述結果是隻有你的元件的背景將是21％不透明的，而不是元素的內容。

來源

2012-10-05 21:47:34 bfavaretto

#wrapper中的所有內容都將繼承您指定的不透明度，而不管它的位置。這可能是你在做什麼：

<!-- #loading will have the same opacity of its parent element --> 
<div id="wrapper"> 
    <div id="loading"></div> 
</div>

你必須把#loading元素的標籤放在#wrapper元素之外。

<!-- #loading and #wrapper will have their own separate opacity --> 
<div id="loading"></div> 
<div id="wrapper"></div>

來源

2012-10-05 22:03:13 harrypujols

顯示CSS中不透明度的內容

回答

相關問題