我正在尝试在图像上放置一个覆盖层，但是这个覆盖层延伸到了顶部的菜单栏上，我不知道如何只将其粘贴在图像上。
我尝试了不同的调整图像和更改位置的方法，但它仍然延伸到菜单栏上。当我调整顶部位置时，对于全屏来说是一个小修复，但一旦在移动设备上，由于菜单被隐藏，它将无法工作。而且，当尺寸改变时，它会在图像下方流动。
1
1092header {
border-bottom: 5px solid coral;
font-family: Arial;
}
header a {
display: inline-block;
text-decoration: none;
color: inherit;
}
.bg-image {
background-image: url('https://images.pexels.com/photos/1647120/pexels-photo-1647120.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-color: blue;
background-repeat: no-repeat;
}
.vh-80 {
min-height: 80vh;
}
.banner-text {
color: white;
font-size: 3rem;
text-align: center;
font-family: Arial;
}
.bg-overlay>* {
position: relative;
}
.bg-overlay::before {
content: "";
position: absolute;
top: 0px;
bottom: 0px;
left: 0;
right: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
我尝试过更改部分，尝试过相对位置的方法，但都没有成功。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
