如何允许 div 不透明而不是背景图像？

Posted 2023-03-06

【中文标题】如何允许 div 不透明而不是背景图像？

【英文标题】：How can i allow opacity to a div and not the background image?

【发布时间】：2012-04-06 12:12:39

【问题描述】：

在 ajax 请求中，将以下类应用于选定的 div。该 div 的所有内容都变得不透明。但是，后台 ajax 加载指示器也变得不透明。我怎样才能使背景图像不会变得不透明？

.ajax-mask

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

（抱歉，不知道为什么有两种不透明样式。不是样式专家）。

这是一个显示当前外观的打印屏幕。应用了遮罩，指示灯应为鲜红色。

【问题讨论】：

"不知道为什么有两种不透明样式" filter 一个是为旧的 IE 设计的。

你不能，（或者至少我认为你不能）但是你可以做的是在包含你想要的图像的 div 上放置一个不透明的 div

【参考方案1】：

好吧，我想不出任何方法来通过仅使用已经存在的单个元素而不使用 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;

【参考方案2】：

使加载的 div/背景图像不是您应用降低不透明度的 div 的子级。