我正在尝试建立我的个人网站，我有：
- 100%屏幕高度和宽度的画布元素，z索引为-1
- div和section标记中的正常内容，z索引为0
- 页面上z索引最高的nav元素
这种安排允许我将画布作为整个网站的背景，它不会滚动，因为它是固定的。导航也是固定的，所以它在滚动时保持在页面的顶部。(我所说的"固定"是指在CSS中对该元素设置的"位置：固定"(
导航有一个透明的背景，所以它是"；"透视"；，它显示了它背后的画布内容，如下所示：导航栏和画布背景(对不起，我还没有足够的点来嵌入图像(
然而，由于导航是透明和固定的，内容会在滚动中显示在其后面，类似于以下图像：内容位于导航后面
我想让内容在导航底部边缘后面褪色，但我也希望保持导航透明，以便在背景中显示画布。以下是淡入淡出的理想效果：文本淡入淡出示例(取自https://www.youtube.com/watch?v=-vbLeY eDkQ，但它使用的文本剪辑不适用于我的情况(
编辑：在不褪色的情况下隐藏内容也可以，目标是在显示背景画布时使内容不显示在透明导航下。它可以是一个突然的截止，而不是渐变渐变，因为经过更多的研究，我发现我想要的渐变效果并不是在浏览器的所有元素上都广泛可用或支持的。
我尝试过从这里检查解决方案：滚动页面时，将可滚动内容隐藏在透明的固定位置div后面？但是它们使用背景图像，这使得它相对简单。在我的例子中，它是一个画布，画布的内容会随着时间的推移而变化。
这是我当前的网页结构(注意：CSS类来自TailwindCSS，但命名是不言自明的。我也在使用React(
<body class="bg-dark m-0">
<nav id="nav_section" class="
fixed
block
overflow-hidden
font-body
z-20
xl:right-0 xl:mr-16 xl:inline-block xl:bottom-auto
w-full">
</nav>
<div id="vector_container" class="fixed left-0 z-0 h-full">
<canvas id="vector_canvas" class="w-full h-full stroke-2"></canvas>
</div>
<section id="first_screen_block" class="h-screen relative overflow-hidden">
<div id="corner_block" class="absolute bottom-0">
<div id="big_name_container"></div>
<div id="click_button_container" class="xl:m-16 xl:ml-12"></div>
</div>
</section>
<section id="second_screen_block" class="h-screen relative xl:mt-64">
<div id="scroll_work_container" class="h-threequarters">
</div>
<div id="work_showcase_text"
class="absolute bottom-0 xl:font-semibold font-display xl:ml-12 xl:text-8xl text-secondary">
<span class="text-primary">Work</span>
showcase.
</div>
</section>
</body>有没有一种方法可以用CSS和/或JS实现这一点？
使用Iframes衰减内容(无JavaScript(
您需要创建一个Iframe标记，将src属性设置为您想要淡入的内容文件。主要内容必须具有单独的样式。iframe必须在焦点上才能滚动。更多详细信息请参阅下面的代码。
演示：https://fadingiframe.netlify.app/
/* Index.html style style-sheet below */
iframe {
position: absolute;
top: 5rem;
width: 100vw;
height: calc(100vh - 6rem);
border: none;
-webkit-mask-image: linear-gradient( /* Mask iframe */
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
mask-image: linear-gradient(
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
}
/* mainContent.html style style-sheet below */
body {
position: absolute;
overflow-x: hidden;
margin-top: 2rem;
color: aliceblue;
width: 80vw;
left: 5vw;
}
body::-webkit-scrollbar { /* Remove scroll bar */
display: none;
}
body {
-ms-overflow-style: none; /* keep in mind that it will only scroll if the iframe is in focus */
scrollbar-width: none;
}
p {
padding: 2rem;
font-size: 2rem;
}
<body>
<nav></nav>
<iframe id="main-content-iframe" src="mainContent.html"></iframe>
<!-- Add iframe and src to main content html file -->
<canvas id="canvas1"></canvas>
<footer></footer>
</body>
<!-- Separate html file in root directory -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./mainContent.css" /> <!-- Link to css file -->
</head>
<body>
<section>
<!-- Your Content here-->
</section>
</body>
</html>
-------------------------------------------------------------------------
仅用于文本-
正文标记具有特殊/隐藏属性
我认为你的问题是你没有使用">身体"；元素选择器。它具有特殊的属性，默认情况下会将主体元素的高度设置为与屏幕匹配。尽管它仍然允许滚动内部内容。我还为文本添加了一个额外的背景div。它提供了更好的阅读体验。看看我的解决方案，它可能会帮你解决问题。如果你有任何问题，请毫不犹豫地问。
演示：https://jsfiddle.net/hexzero/5yjqk43a/
body {
background-image: black;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
color: #fff;
}
section {
position: absolute;
padding: 3rem 25%;
background-image: Linear-gradient(
transparent 6rem, <-- Should be the same as nav Height
#fff 30%, <-- Can set this to nav Height for abrupt cut-off
#fff 70%,
transparent 90%
);
-webkit-background-clip: text;
background-clip: text;
background-attachment: fixed;
scroll-behavior: auto;
z-index: 3;
}
nav {
background: rgba(0, 0, 0, 0.616);
width: 100%;
position: fixed;
top: 0;
height: 6rem; <-- Navigation Height
z-index: 4;
}
section > p {
margin-top: 12rem;
color: transparent;
}
.text-background { <-- Remove this style section to have no background for the content,
width: 60%; <-- along side the <div class="text-background"></div> element
height: 100vh;
right: 20%;
position: fixed;
top: 0;
background-image: Linear-gradient(
transparent 6rem, <-- Background to nav height
rgba(102, 51, 153, 0.924) 20%,
rgba(102, 51, 153, 0.931) 90%,
transparent 100%
);
z-index: 0;
}
canvas {
width: 100%;
background-color: rebeccapurple;
position: fixed;
top: 0;
z-index: -1;
}
footer {
position: fixed;
width: 100%;
height: 1rem;
background: rebeccapurple;
z-index: 1;
bottom: 0;
}
p {
font-size: 2rem;
}
如果您对JavaScript版本感兴趣，请告诉我，以获得更好的浏览器支持。感谢
通过使导航的颜色透明，您将能够透过它看到下面的画布。由于您没有为您的类提供CSS；相反，我拼凑了一些新的HTML。您可以在下面看到透明度效果。
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillText("Hello World! This is text on a canvas that is behind the nav", 10, 10);.nav-wrapper {
height: 60px;
top: 0;
right: 0;
left: 0;
position: fixed;
z-index: 5;
background-color: #00000044;
}
#myCanvas {
z-index:4;
height: 100%;
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin:0">
<div class="nav-wrapper">
<nav>
a simple nav
</nav>
</div>
<div style="position:fixed;top:0;left:0;bottom:0;right:0; background-color: lightblue;z-index: 4 ;">
<canvas id="myCanvas">
</canvas>
</div>
</body>
</html>