不透明的 div 内的 div 没有不透明度
我必须使用 asp.net ajax 工具包来完成任务，我正在做的是在触发更新进度控件时在整个屏幕上显示一个 div。主 div（覆盖整个屏幕）具有一定的不透明度，但是当我尝试在其中包含一个 div 时，即使我将其设置为“无”，该 div 也会获得一些不透明度；
示例 HTML：
<ProgressTemplate>
<div class="updateProgressBox">
<div class="updateProgressMessage">
<p>Processing request..</p>
</div>
</div>
</ProgressTemplate>
和 CSS：
.updateProgressBox {
top: 0px;
height: 100%;
background-color:Gray;
opacity:0.7;
filter:alpha(opacity=70);
vertical-align: middle;
left: 0px;
z-index: 999999;
width: 100%;
position: absolute;
text-align: center;
}
.updateProgressMessage {
border: black 2px solid;
background-color: #fff;
z-index: 1000000;
padding: 20px;
opacity:1.0;
filter:alpha(opacity=100);
margin: 300px auto auto auto;
font-weight: bold;
vertical-align: middle;
width: 200px;
text-align: center
}
我应该怎么做才能使带有消息的 div 没有透明度和白色背景色？
I have to use the asp.net ajax toolkit for a task and what I am doing is to display a div on the whole screen when an update progress control is triggered. The main div (that covers the whole screen) is having some opacity but when I try to have a div inside this one that one also gets some opacity even though I set it to none;
Example HTML:
<ProgressTemplate>
<div class="updateProgressBox">
<div class="updateProgressMessage">
<p>Processing request..</p>
</div>
</div>
</ProgressTemplate>
And CSS:
.updateProgressBox {
top: 0px;
height: 100%;
background-color:Gray;
opacity:0.7;
filter:alpha(opacity=70);
vertical-align: middle;
left: 0px;
z-index: 999999;
width: 100%;
position: absolute;
text-align: center;
}
.updateProgressMessage {
border: black 2px solid;
background-color: #fff;
z-index: 1000000;
padding: 20px;
opacity:1.0;
filter:alpha(opacity=100);
margin: 300px auto auto auto;
font-weight: bold;
vertical-align: middle;
width: 200px;
text-align: center
}
What should I do to make the div with the message have no transparency and white background color?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
要解决此问题，请在父 div
背景上使用 RGBA 背景属性：rgba(64, 64, 64, 0.5)。 64、64、64 是 RGB 颜色值。 0.5 是不透明度值。现在，父级可以拥有自己的不透明度值，该值不会被子级继承。 FireFox、Opera、Chrome、Safari 和 IE9 完全支持此功能。检查工作示例 http://jsfiddle.net/Rp5BN/
为了支持 IE 5.5 到 8，我们需要使用供应商特定的CSS'渐变过滤器：'所以你需要添加这个。
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);其中 7f 代表 127，即 50% 不透明度，404040 是颜色。
检查 IE 中的工作示例 http://jsfiddle.net/Rp5BN/2/
To overcome this issue, use the RGBA background property on the parent div
background: rgba(64, 64, 64, 0.5). 64, 64, 64 are the RGB color values. and 0.5 is the opacity value. Now parent can have its own opacity value that will not be inherited by its children. This is fully supported by FireFox, Opera, Chrome, Safari and IE9.Check working example at http://jsfiddle.net/Rp5BN/
To support IE 5.5 to 8 we need to use vendor-specific CSS 'gradient filter:' So you need to add this.
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);Where 7f represents 127, i.e. 50% opacity and 404040 is the color.
Check working example in IE http://jsfiddle.net/Rp5BN/2/
opacity是继承的并且无法重置。您可以...
rgba()。opacityis inherited and it can not be reset.You can...
rgba().要实现此目的，您需要在背景本身上使用 RGBA 颜色，因为不透明度会更改父元素本身内所有子节点的 Alpha 通道。例如
To accomplish this you need to use an RGBA colour on the background itself as opacity changes the alpha channel for all child nodes within the parent element itself. E.g.