javascript - 关闭居中 div 的不透明度

Question

我正在写一个出现在网站中心的框。为此，我动态 (js) 创建了两个元素 - 覆盖整个页面并具有 0.5 不透明度以显示某些网站的叠加层，以及一个不应具有不透明度的框。

问题是叠加层和盒子都有点透明。

this.createOverlay = function () {
            handler = document.createElement('div');
            handler.style.display = 'hidden';
            handler.style.width = '100%';
            handler.style.height = '100%';
            handler.style.top = 0;
            handler.style.left = 0;
            handler.style.position = 'absolute';
            handler.style.background = 'black';
            handler.style.color = "#aaaaaa";
            handler.style.opacity = "0.5";
            handler.style.filter = "alpha(opacity = 5)";
            return this;
        };
        this.createCenteredBox = function (width, height, url) {
            var data = JSON.parse(data);

            handler = document.createElement('a');
            handler.href = data.product_feed_deep_link;
            handler.target = "_blank";
            handler.style.display = "block";
            handler.style.width = width + "px";
            handler.style.height = height + "px";
            handler.style.position = "absolute";
            handler.style.color = "black";
            handler.style.backgroundColor = "#ffffff";
            handler.style.opacity = "1";
            handler.style.top = "50%";
            handler.style.left = "50%";
            handler.style.marginTop = "-" + height / 2 + "px";
            handler.style.marginLeft = "-" + width / 2 + "px";
            handler.style.padding = "0 10px 10px 10px";
            handler.style.borderRadius = "4px";
            var div = document.createElement('div');
            handler.appendChild(div);
            return this;
        };

这是代码，无论我将不透明度设置为 1 还是不透明度过滤器，我都无法关闭框的不透明度。

我该如何解决这个问题？

Answer 1

不透明度不是继承的(see here)，但是，应用了不透明度属性的元素(后代)中的所有元素都将受到影响。

解决此问题的最佳方法是使用 rgba。

handler.style.background = "rgba(0, 0, 0, .5)";  // RGB 0,0,0 is #000 (black).
//handler.style.opacity = "0.5";
//handler.style.filter = "alpha(opacity = 5)";

参见 2nd and 3rd answer here还有