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背景的不透明度，还要设置整个内容的不透明度。（以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>

Answer 2

因为父母的不透明度也影响内部div而蓝色是身体背景。相反，您可以为父div设置rgba()

试试这个

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

Answer 3

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

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

3 个答案: