css 我怎样才能使我的粘性标题对背景透明，但对图像和文本不透明？

kupeojn6 于 2023-08-08 发布在其他

关注(0)|答案(1)|浏览(96)

我有一个径向梯度作为背景的页面。内容比视口长，因此该梯度的中心不在屏幕的中心，这也是期望的结果。现在的问题是，我还使用了一个透明的粘性标题进行导航，这样你就看不到标题和内容之间的可见线条，但这意味着标题会干扰页面上的文本和图像。
有没有一种方法可以使标题只对背景图像透明？
我已经尝试在标题上设置相同的背景，但这会产生非常不同的结果，现在有两个不同的标题。我曾经想过把文本放在一个滚动的div中，但是这样的话，背景结果就不会覆盖整个页面，只会覆盖视口。

css

来源：https://stackoverflow.com/questions/76853526/how-can-i-make-my-sticky-header-be-transparent-to-the-background-but-not-to-the

1条答案

按热度按时间

w6lpcovy1#

这里的z索引值确保覆盖层在标题下方，径向渐变背景应用于.content div，确保它不会受到标题的影响。在u给予尝试之前，我已经使用了这个

<body>
<div class="header">
<nav>
  Your navigation content here 
</nav>
</div>
<div class="header-overlay"></div>
<div class="content">
 Your main content here
</div>
 //css file//
header-overlay {
position: sticky;
top: 0;
height: 60px; /* Adjust the height of your header */
background-color: rgba(0, 0, 0, 0.5); /* Adjust the color and transparency 
*/
z-index: 1;
}
.content {
 background: radial-gradient(ellipse at top left, #f06, #00f);
  }

字符串

赞(0）回复(0）举报 2023-08-08

我来回答

css 我怎样才能使我的粘性标题对背景透明，但对图像和文本不透明？

1条答案

相关问题

热门标签

最新问答