這是影像 這是我用來在向下滾動時更改背景顏色的 Java 腳本。但是在這里，當我向下滾動時，背景顏色會發生變化，但是向下滾動時，導航欄前面還有另一個影像問題。
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("navbar").style.background = "black" ;
// document.getElementsByClassName("img").style.z-index = "-1" ;
}
else{
document.getElementById("navbar").style.background = "transparent";
}
}
在這里，當我向下滾動和背景顏色更改時，我希望影像位于導航欄的背面。這是我使用過的 CSS。
#navbar{
align-items: center;
display: flex;
top: 0px;
position: sticky;
background: transparent;
}
#service-container{
display: grid;
padding: 30px;
width: 96%;
height: 100%;
background-image: linear-gradient(to bottom right,rgb(255, 255, 255),rgb(226, 162,
194),rgb(196, 113, 154),rgb(248, 138, 193));
z-index: -1;
}
#service-container .h-primary2{
margin: 15px 43px;
padding: 50px;
font-family: 'Libre Baskerville', serif;
text-align: center;
font-weight:900;
}
#services{
font-family: 'Libre Baskerville', serif;
}
.columns img{
width: 50%;
height: 50%;
}
div .from-right{
float: right;
text-align: center;
grid-column: 3/4;
transform: translateX(50%);
}
div .from-left{
float: left;
text-align: center;
grid-column: 2/3;
transform: translateX(-50%);
}
這里只有影像出現在導航欄前面，但文本內容在導航欄后面，這很好。
這是一個大問題，但請幫助我，我已經嘗試了一些不起作用的事情。這是與家庭部分，在那里我有同樣的問題SIGN IN和SIGN UP這是未來導航欄的按鈕盈
**因為我仍在學習 javascript，實際上并不知道要進行哪些更改。希望我已經嘗試清楚地解釋這個問題**
uj5u.com熱心網友回復：
將影像的位置固定在導航欄下方或導航欄本身
uj5u.com熱心網友回復：
您可以設定z-index導航欄的 。
W3Schools 文章
例如：
#navbar {
z-index: 999;
}
導航欄現在顯示在z-index低于 999的任何內容的頂部。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/372837.html
標籤：javascript css 图片 按钮 导航栏
上一篇：處理中的隨機影像匯入