使透明导航后面的div褪色，但在其后面保持可见的背景画布 [英] Fade out divs behind transparent nav but keep a background canvas visible behind it
问题描述
我正在尝试在我的个人网站上建立
I'm trying to build my personal website where I have:
- 具有100％屏幕高度和宽度，z-index为-1的画布元素
- div和section标记中的常规内容，z-index为0
- 位于页面上最高z-index的nav元素
这种安排使我可以将画布作为整个网站的背景，它不会滚动，因为它是固定的.导航也已固定，因此它在滚动时位于页面顶部. (固定"是指CSS中在该元素上设置的位置:固定")
This arrangement allows me to have the canvas as the background of the entire website, it doesn't scroll because it's fixed. The nav is fixed as well so it stays at the top of the page with scrolling. (By "fixed" I mean "position: fixed" set in CSS on that element)
导航具有透明背景，因此它是透视"，它显示了其后面的画布内容，如下所示:
The nav has a transparent background, so it's "see-through", which shows the canvas content behind it, like this: navbar and canvas background (sorry I don't enough points to embed images yet)
但是，由于导航是透明且固定的，因此内容会滚动显示在其后面，如下图所示:
However, because the nav is transparent and fixed, content gets shown behind it on scroll, something like this image: content goes behind nav
我想让内容在导航栏底部边缘后面消失，但是我也想保持导航透明，以便在背景中显示画布.理想的褪色效果如下:文本褪色示例(摘自 https://www.youtube.com/watch?v=-vbLeY-eDkQ 但它使用的文本剪辑不适用于我的情况)
I would like to have the content fade as it goes behind the nav's bottom edge, but I would also like to keep the nav transparent in order to show the canvas in the background. Here's what the fade would ideally look like: text fade example (taken from https://www.youtube.com/watch?v=-vbLeY-eDkQ but it uses text clip which doesn't apply to my case)
隐藏内容而不褪色也很好，目标是在显示背景画布时使内容不出现在透明导航下面.它可能是突然终止，而不是渐变淡变，因为经过更多研究后，我发现所寻找的淡变效果并未在浏览器的所有元素上广泛使用或支持.
Hiding the content without a fade is fine as well, the target is to make the content not appear beneath the transparent nav whilst showing the background canvas. It can be an abrupt cut-off instead of a gradient fade because after some more research I've found the fade effect I'm looking for isn't widely available or supported on all elements across browsers.
我尝试从此处检查解决方案:滚动页面时将可滚动内容隐藏在透明固定位置div后面吗? 但是他们使用背景图片，因此相对来说比较简单.就我而言，它是一个画布，画布的内容会随着时间而变化.
I have tried checking solutions from here: Hide scrollable content behind transparent fixed position divs when scrolling the page? but they use a background image, which makes it relatively simpler. In my case, it's a canvas and the content of the canvas changes with time.
这是我当前的网页结构(注意:CSS类来自TailwindCSS，但命名不言自明. 我也在用React)
Here's my current webpage structure (Note: the CSS classes are from TailwindCSS but the naming is self-explanatory. I'm also using 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实现此目的?
Is there a way to achieve this with CSS and/or JS?
推荐答案
使用iframe淡化内容(不使用JavaScript)
您将需要创建一个Iframe广告代码，并将src属性设置为您想要淡入的内容文件.主要内容必须具有不同的样式.必须将iframe对准焦点才能进行滚动.在下面的代码中有更多详细信息.
Fading Content using Iframes (No JavaScript)
You will need to create an Iframe tag with src attribute set to the content file you would like fade. The main content has to have separate styles. The iframe must be in focus to allow scrolling. More details in the code below.
/* 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>
--------------------------------------------------- --------------------------
仅适用于文本-
身体标记具有特殊/隐藏属性
我认为您的问题是您不使用"主体"元素选择器.它具有特殊的属性，默认情况下会将body元素的高度设置为与屏幕匹配.尽管它仍然允许滚动内部内容.我也为文本添加了额外的背景div.它提供了更好的阅读体验.看看我的解决方案，它可以帮助您解决问题.如果您有任何疑问，请随时提出.
-------------------------------------------------------------------------
For Text only -
Body Tag Has Special/Hide Properties
I think your issue is that you do not use the "body" element selector. It has special properties, that by default set the body element height to match the screen. Although it still allows to scroll the inner content. I add and extra background div for the text as well. It provides a better reading experience. Have a look at my solution it may help you solve your problem. If you have any questions don't hesitate to ask.
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版本感兴趣，请告诉我，以获得更好的浏览器支持.谢谢
Tell me if you would be interested in a JavaScript version, for better browsers support. Thanks
这篇关于使透明导航后面的div褪色，但在其后面保持可见的背景画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
