javascript - 使用 jquery 创建覆盖但内容继承了 CSS 不透明度

我创建了一种模态覆盖，然后是一个带有覆盖的内容.. 模态覆盖设置了不透明度并且它可以工作但覆盖的内容也具有不透明度..我认为它继承了它......我真的不想要将新类应用于内容，有没有办法说只适用于

这是我的 css

.modal-overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000000;
    display: none;
}

和我的 jquery 创建模型和内容

var overlayLayer = $("<div id='office-location'></div>").addClass('modal-overlay'); //THIS HAS THE OVERLAY CLASS OF CSS - SO IT SHOULD HAVE A OPACITY SET AND IT DOES

$('body').append(overlayLayer);

$('<div id="content-for-overlay" style="background-color: white;"></div>').appendTo(overlayLayer);  /// CONTENT IS ALSO HAS OPACITY BUT ITS WRONG

this.render({ to: "content-for-overlay", partial: "office-location-modal" });// THIS Sends a content from one file to my ID content-for-overlay...  Its standard html

$("body").css("overflow", "hidden");
$('#office-location').css("opacity", 0.8).fadeIn(150);
$('#content-for-overlay').css("opacity", 1);

最佳答案

CSS“opacity”属性没有被继承，尽管看起来是这样。

由于内容在叠加层内，因此不透明度充其量是父级(叠加层)的不透明度。因此，如果父级的不透明度为 0.5，那么在视觉上，它的所有子级都只能达到该不透明度(不会更高)。

为了避免这种情况，元素必须在 HTML 中分开。我知道这很痛苦，我认为 CSS 应该真的有办法解决这个问题，但不幸的是它没有。

另一种适用于嵌套元素的方法是忘记 opacity 属性，而是使用具有 alpha 透明度的 PNG 图像并将其设置为叠加层的背景。

关于javascript - 使用 jquery 创建覆盖但内容继承了 CSS 不透明度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/965662/