我有一个固定的导航栏，网站的背景随着部分的变化而变化（部分背景是对角线的）。现在我希望导航栏的背景颜色随着底层部分背景颜色的背景而变化，而不仅仅是将导航栏的背景颜色设置为相同的颜色，但导航栏对背景透明但不是它的内容，如下所示：
而不是那样：
example of how it should NOT look like
我非常感谢任何关于如何实现某事的想法或方法！
【问题讨论】：
标签： javascript html css scroll navbar
如果您想始终保持导航栏在顶部，请将位置更改为固定并将设置的 z-index 更改为较高的值，使其位于所有其他元素的顶部，您可以为导航栏使用以下 CSS 类。当然，您可以将 background-color 和 opacity 设置为与您的背景相匹配的值。
.myNavBar {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
}
【讨论】：
如果不分享一些关于您如何实现不良结果的代码，可能很难帮助您。
我想试试这个，它会起作用的。
在导航栏的容器中，将 CSS 中的 z-index 设置为一个非常高的数字，例如 1999。这将确保导航栏保持在其他元素之上，假设没有其他元素被设置为具有在这种情况下，z-index 大于 1999。
.navbar-container {
z-index: 1999;
}
【讨论】：
您需要创建一个 iframe 标记，并将 src 属性设置为要淡出的内容文件。主要内容必须有单独的样式。 iframe 必须处于焦点位置才能允许滚动。更多细节在下面的代码中。
/* 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”元素选择器。它具有独特的属性，可以将 body 元素的高度设置为默认匹配屏幕。虽然它仍然允许滚动内部内容。我还为文本添加了一个额外的背景 div。它提供了更好的阅读体验。请看看我的解决方案。它可以帮助您解决问题。如果您有任何问题，请不要犹豫。
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 版本感兴趣，请告诉我。谢谢
【讨论】：