html - 固定图像背景上的CSS可变高度切口

以下代码通过不透明的背景模拟了一个切口，在下面的固定图像上滚动。切口的高度是动态的，可以调整大小以适合其内容。

问题：代码使用了可怕的技巧！注意，切口的内容Y在HTML中是重复的，尽管在视觉输出中仅显示一次。

事情是-黑客“行得通”。两个副本都是必需的：

如果第一个被删除，则剩余内容Y会在图像后面渲染，不再可见。
如果移除了第二个，则切口会塌陷到零高度，并且剩余的内容Y与内容Z重叠。

问题：在纯CSS中，有没有更好的替代方法？

<!DOCTYPE html>
<html>
	<head>
		<title>Simulated Backdrop Image Cutout through Opaque Background</title>
		<style>
			.opaque-background {
				background-color: black;
				color: white;
			}

			.container {
				position: relative;
			}

			.cutout {
				background-attachment: fixed;
				background-image: url(https://i.stack.imgur.com/RTFBR.jpg);
				background-repeat: repeat;
				position: absolute;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body class="opaque-background">
		Content preceding (X)
		<div class="container">
			<div class="cutout">
			Content between (Y)
			</div>
			Content between (Y)
		</div>
		Content following (Z)
	</body>
</html>

最佳答案

男孩，我觉得很可恶。答案很简单，就像调整z-index一样，以便切口在内容Y后面显示。（我以为我已经尝试过了，但显然没有。）

.cutout {
    background-attachment: fixed;
    background-image: url(https://i.stack.imgur.com/RTFBR.jpg);
    background-repeat: repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

HTML：

Content preceding (X)
<div class="container">
    <div class="cutout">
    </div>
    Content between (Y)
</div>
Content following (Z)

关于html - 固定图像背景上的CSS可变高度切口，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57646457/