2012-03-21 56 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的孩子你申请的降低不透明度。

相关问题