我怎样才能让不透明度为一个div，而不是背景图片？ [英] How can i allow opacity to a div and not the background image?

问题描述

我怎样才能让不透明度为一个div，而不是背景图片？

How can i allow opacity to a div and not the background image?

在一个Ajax请求，下面的类应用到选定的股利。该分区的所​​有内容变得不透明。然而，背景AJAX加载指示灯也会变得不透明。我怎样才能使背景图像不会变得不透明？

On an ajax request, the following class is applied to a selected div. All contents of that div become opaque. However, the background ajax loading indicator also becomes opaque. How can i make it that the background image does not become opaque?

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

（对不起，不知道为什么有两个不透明的风格，不是一个风格SPERT）。的

下面是一个PRINTSCREEN显示什么它目前的样子。面具被应用，指示灯应亮红色。

Here is a printscreen showing what it currently looks like. The mask is applied and the indicator should be bright red.

推荐答案

嗯，我想不出任何办法只用一个已经存在不使用CSS3解决方案的单一元素来做到这一点...你已经使用了JavaScript，因此也许你可以创建一个包含在后台加载图像在页面的底部，并隐藏，然后将其在该司的中心位置和取消隐藏一盒？

Well, I can't think of any ways to do this by using only the single element that already exists without using a CSS3 solution... You're already using JavaScript, so maybe you could create a box that contains that loading image in the background at the bottom of the page and hide it, then position it in the center of the division and un-hide it?

不管怎么说，这里的 CSS3的解决方案我想出了：

Anyways, here's the CSS3 solution I came up with:

.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;
}

这篇关于我怎样才能让不透明度为一个div，而不是背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！