2012-03-21 85 views
4

我怎樣才能讓不透明的一個div而不是背景圖片?我怎樣才能讓不透明的一個div而不是背景圖片?

在ajax請求上,以下類將應用於選定的div。該div的所有內容都變得不透明。但是,背景ajax加載指示器也變得不透明。我怎樣才能讓背景圖像不會變得不透明?

.ajax-mask 
{ 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
    background: url('/Images/Ajax/Ajax.gif') no-repeat center center; 
} 

(對不起,不知道爲什麼有兩個不透明的風格。不是一個風格spert)。

下面是一個顯示當前外觀的打印屏幕。應用面罩並且指示器應該呈鮮紅色。

enter image description here

+1

「不知道爲什麼有兩個不透明的風格」的'filter'一個是爲舊的IE。 – BoltClock 2012-03-21 22:22:30

+0

你不能,(或者至少我不認爲你可以),但你可以做的是將一個不透明的div放在包含你想要的背景圖片的div上 – SpYk3HH 2012-03-21 22:22:53

回答

3

嗯,我想不出任何辦法只使用已經存在不使用CSS3解決方案的單一元素來做到這一點......你已經在使用JavaScript,所以也許你可以在頁面底部的背景中創建一個包含加載圖像的框並隱藏它,然後將它放置在分區的中心並取消隱藏它?

不管怎麼說,這裏的CSS3 solution我想出了:

.ajax-mask { 
    position: relative; 
} 
.ajax-mask:after { 
    background: rgba(255, 255, 255, 0.5) url('/Images/Ajax/Ajax.gif') no-repeat center center; 
    content: " "; 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
} 
0

使它所以加載DIV /背景圖片是不是DIV的孩子你申請的降低不透明度。

相關問題