gpt4 book ai didi

html - 在透明父元素之上创建非透明 div

转载 作者:技术小花猫 更新时间:2023-10-29 12:17:17 25 4
gpt4 key购买 nike

EDIT: Changed title to actually be correct

我正在尝试在所有 HTML 和 CSS 中模拟模态弹出窗口,但我在做的事情中遇到了一个单一的元素。我希望最里面的 div,也就是有内容的那个,不像边框那样不透明,但无论我用 CSS 尝试什么,我都无法让它工作。这是代码:

CSS

.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

HTML

  <table style="height: 100%; width: 100%; position: fixed; top: 0; left: 0;"><tr><td class="modalBackground">
<div style="display: table; height: 40px; width: 150px; position: fixed; overflow: hidden;
top: 40%; margin-top: -50px; left: 50%; margin-left: -75px; padding-left: 30px;
border: solid 1px navy; background-color: White;">
<div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
<div style="#position: relative; #top: -50%;"
><asp:Image runat="server" ImageUrl= "~/images/indicators/indicatordark.gif" /> working...</div>
</div>
</div></td></tr></table>

我在这方面已经穷途末路了。无论如何,我都不是 HTML 或 CSS 专家,因此非常感谢解释该解决方案为何有效。

最佳答案

更新的答案

现在最好的方法是使用 rGBA 颜色。它不适用于较旧的浏览器,但您可以通过为它们提供纯色来让设计优雅地降级。示例:

CSS

.parent {
background: gray; /* older browsers */
background: rgba(128,128,128,0.7); /* newer browsers */
}

.child {
background: blue;
}

原始答案

很烦人,但 CSS 不允许这样做。为一个元素设置不透明度意味着没有子元素可以有更大的不透明度。 (100% 的 25% 不透明度是?对。)

因此,一种解决方案是使用微小的透明 PNG 作为重复背景图像来解决这个问题。唯一的问题是 IE6,还有 an excellent workaround called supersleight .

(已更新。认为 supersleight 会为你工作。)

更新这是一个非常简单的测试用例。创建图像(例如,具有 50% 黑色填充的 PNG),然后创建此文件——将它们保存在同一文件夹中。如果您没有在“stuff”后面看到一个带有透明背景的细框,那么您要么没有正确保存文件,要么将图像保存在其他地方。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body { background:white; }
#overlay { background-image:url(test.png); }
</style>
</head>
<body>
<div id="overlay">stuff</div>
</body>
</html>

关于html - 在透明父元素之上创建非透明 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2356711/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com