所以我正在为我的页面制作背景,我希望背景总是留在用户的屏幕上,所以我决定使用位置粘性。但是,背景需要在所有元素的后面,所以我也需要使用绝对位置,这是我当前的代码:
html{
user-select: none;
text-decoration: none;
width: 100%;
box-shadow: 0px -5px 20px black;
z-index: -9;
background-color: black;
background-size: cover;
}
h1#madeby{
text-align: center;
align-items: center;
font-size: 20px;
color: #7289da;
}
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #141618;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #7289da;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #8da5fc;
}
div.home,
img#wallpaper{
width: 100%;
}
div#wallpaper_container{
position: sticky;
height: 100%;
width: 100%;
}
img#wallpaper{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
right: 0px;
top: 0px;
}
h2#title{
text-align: center;
align-items: center;
font-size: 30px;
color: #7289da;
}
h2#title strong{
text-align: center;
align-items: center;
font-size: 20px;
color: #f5f5f5;
}
div.song_selector{
border-radius: 10px;
width: 100%;
}
div.song_selector h1{
margin: 5px;
}
div.song_selector h1.songs:hover{
color: #f8e3e3;
background-color: #7289da80;
}
div.song_selector h1.songs{
background-color: #7289da2f;
border-radius: 5px;
color: #ffffff;
font-size: 40px;
/* border-style: solid; */
/* border-color: #FFD700; */
/* border-width: 1.5px; */
text-align: center;
}
div.song_selector h1.songs strong{
color: #7289da;
font-size: 25px
}
a#title{
text-align: center;
align-items: center;
color: #19c1aa;
font-size: 4vw;
position: relative;
z-index: 1;
font-weight: bold;
text-decoration: none;
}
.btns strong{
background-color: #7289da2f;
border-radius: 5px;
color: #7289da;
font-size: 60px;
}
.btns strong:hover{
background-color: #7289da80;
color: #7b96fa;
box-shadow: 0px 0px 5px black;
}
.btns{
text-align: center;
}
div.bg_ctn{
top: 0;
position: sticky;
z-index: 0;
}
div.bg_ctn img{
position: absolute;
width: 99vw;
height: 50vw;
z-index: 0;
margin-top: -11px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-right:-104px;
}
<div class="home">
<h1 id="madeby">Made by Ivan</h1>
<h2 id="title">Click To Play</h1>
<div class="song_selector">
<h1 class="btns">
<strong onclick="loop()" id="loopBtn">Loop</strong>
<strong onclick="pauseplay()" id="pause">Pause</strong>
<strong onclick="changeSong()" id="changeBtn">Change</strong>
</h1>
</div>
<div class="bg_ctn">
<img src="https://images3.alphacoders.com/940/thumb-1920-940605.jpg" id="img">
</div>
</div>
它不会在元素(背景)后面,而是停留在底部
答案 0 :(得分:0)
请参考 CSS 中的 z-index。您需要根据您想要的顶部内容,为页面的每个主要部分(例如标题、不同元素)提供 z-index。这是一些参考-
答案 1 :(得分:0)
尝试使用 position: fixed
代替粘性,并使用 z-index: -1
使其位于文本后面:
div.bg_ctn {
top: 0;
position: fixed;
z-index: -1;
}