我已将背景颜色设置为白色，但父元素的不透明度如何影响它？

Question

我已将内部 div 的背景颜色设置为白色，并将其父级 div 的不透明度设置为 0.6。似乎内部 div 的背景颜色不完全是白色。如果我将父 div 的不透明度更改为 1.0，问题就消失了，为什么？ http://jsbin.com/zekacunefi/edit?html,output

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="js/jquery.js"></script>
 <style>
  #msg_container {
   position: fixed;
   z-index: 3800;
   background-color: #000000;
   opacity: 0.6;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
  }

  #modalDialog {
   display: inline-block;
   z-index: 3801;
   background-color: white;
   position: absolute;
   border: 1px solid rgb(103, 103, 103);
   box-shadow: 0 4px 17px 0px rgba(0,0,0,0.4);
   top: 50%;
   left: 50%;
  }

  body {
   background-color: blue;
  }
 </style>
</head>
<body>
 
 <script>
  MessageBox("abc\ndef\ng\nhdasfasdfsdsdfsd");
  function MessageBox(str) {
   var boxHtml = "<div id='msg_container'><div id='modalDialog'></div></div>";
   $("body").append(boxHtml);
   var md = $("#modalDialog");
   var contentArray = str.split("\n");
   var newArray = contentArray.map(function(ele, idx) {
    return ele + "<br>";
   });
   md.html("<p>" + newArray.join("") + "</p>");
   var w = md.width(),
       h = md.height();
   md.css({
    marginTop: -1 * h / 2 + "px",
    marginLeft: -1 * w / 2 + "px"
   });
   $("#msg_container").appendTo($("body"));
  }
 </script>
</body>
</html>

Answer 1

这是因为父级的不透明度也会影响内部 div 并且蓝色是正文背景。相反，您可以为父级 div

设置 rgba()

试试这个

    #msg_container {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.6);
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

Answer 2

您更改父项及其所有子项的不透明度。这意味着您将通过父项 div 和子项看到蓝色背景。

Answer 3

当您使用 "opacity" 时，您不仅设置了 div 背景的不透明度，还设置了整个内容的不透明度。（参见此 W3C Wiki 作为示例：http://www.w3.org/wiki/CSS/Properties/opacity）

恕我直言，您应该从#msg_container 和#modalDialog 中删除不透明度设置，然后改用 rgba() 来定义#msg_container.

的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 <style>
  #msg_container {
   position: fixed;
   z-index: 3800;
   background-color: rgba(0,0,0,0.6);
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
  }

  #modalDialog {
   display: inline-block;
   z-index: 3801;
   background-color: white;
   position: absolute;
   border: 1px solid rgb(103, 103, 103);
   box-shadow: 0 4px 17px 0px rgba(0,0,0,0.4);
   top: 50%;
   left: 50%;
  }

  body {
   background-color: blue;
  }
 </style>
</head>
<body>
 
 <script>
  MessageBox("abc\ndef\ng\nhdasfasdfsdsdfsd");
  function MessageBox(str) {
   var boxHtml = "<div id='msg_container'><div id='modalDialog'></div></div>";
   $("body").append(boxHtml);
   var md = $("#modalDialog");
   var contentArray = str.split("\n");
   var newArray = contentArray.map(function(ele, idx) {
    return ele + "<br>";
   });
   md.html("<p>" + newArray.join("") + "</p>");
   var w = md.width(),
       h = md.height();
   md.css({
    marginTop: -1 * h / 2 + "px",
    marginLeft: -1 * w / 2 + "px"
   });
   $("#msg_container").appendTo($("body"));
  }
 </script>
</body>
</html>

我已将背景颜色设置为白色，但父元素的不透明度如何影响它？

I have set the background-color to white, but how does the opacity of the parent element affect it?

html

javascript

css

jquery

opacity