Html 带有文本的半透明元素，滚动时，该元素位于一个导航栏的上方，但位于另一个导航栏的下方

如何制作一个半透明元素，其中包含文本，位于一个导航栏的顶部，但位于另一个导航栏的下方？我试图创造一种效果，比如红色的凯悦标志和“香港”在棕色条的上方，但在白色（屏幕顶部）的下方

您只需使用各种

z-index

值进行排列和

opacity

即可获得透明度

（来源：）

---

您正在搜索哪种类型的解决方案？如果你看看君悦酒店做了什么，他们会使用图像和设置

position:absolute

将其放置在他们想要的位置

如果不想使用图像，可以使用一些层叠在一起的HTML元素来重新创建徽标：请参见此处

几点注意：

• 您必须在logowrapper的父级上设置较低的z索引 （在我的例子中，任何低于500的都可以），这样徽标就不会消失 在上面
• 您需要调整logowrapper上的css，以将徽标定位到您想要的位置
• 如果调整红色条的高度，请确保将行高设置为红色条的高度，以确保文本垂直居中

希望这能帮到你

#topbar {
    height: 20px;
    width: 100%;
    position: fixed; /*so it doesn't scroll with the page*/
    left: 0;
    top: 0;
    z-index: 3; /*the bar on top gets the highest index because it's above everything else*/
}
#secondtopbar {
    height: 20px;
    width: 100%;
    position: fixed;
    top: 20px;
    left: 0;
    z-index: 1; /*the second bar on top gets the lowest index because it's below everything else except the text, with doesn't even get a z-index*/
}
#logo {
    opacity: 0.5; /*this makes it half-transparent, on a scale from 0-1*/
    height: 100px;
    width: 100px;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2; /*the logo gets the middle index because it's in between*/
}