我正在尝试使用background-image将body的背景设置为图像，并且我有想要放置在图像顶部的内容。在CSS中，我使用body选择器与::before伪元素设置背景;然而，图像不会出现在背景中，除非我使用z-index: -1。(我使用::before，因为我想将图像固定到视口，我不想在常规body选择器中这样做，因为这会修复页面上的所有内容，并阻止我滚动内容。)
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url(...);
}
form {
background: purple;
border-radius: 5px;
padding: 50px;
width: 40%;
margin: 0 auto;
}<html>
<body>
<form></form>
</body>
</html>我的问题是:为什么我需要将z-index设置为-1才能使图像出现在背景中?为什么它不自动出现在背景中?所有的内容?这不就是::before的目的吗?
这里有点棘手。首先，::before并不意味着这个伪元素恰好位于form元素之前。实际上，这意味着在form元素的任何子元素之前创建伪元素。::after反之亦然。其次，你将position: fixed;设置为::before，这为它创建了新的堆叠上下文-简单的原因是:为什么position:relative;为什么它与form元素的内容重叠
乌利希期刊指南也许你应该在body元素上使用background-attachment: fixed;https://www.w3schools.com/cssref/pr_background-attachment.asp