关闭居中 div 的不透明度答案

【问题标题】：Turning off opacity on centered div关闭居中 div 的不透明度
【发布时间】：2015-07-16 20:28:58
【问题描述】：

我正在编写一个出现在网站中心的框。为此，我动态（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，还是不透明度过滤器，或者其他什么。

我该如何解决这个问题？

【问题讨论】：

标签： javascript html css

【解决方案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

【讨论】：