我正在寻找一种方法来保持我的固定位置图像,这些图像通过z-index放置在页面的背景中,始终位于中心。
现在它们位于中心,但是当我开始滚动时,它们不会在页面上向下移动,因此不再居中。
我尝试将图像容器设置为顶部和左侧50%的固定位置。我还尝试使用50vh和50vw,并测试了其他vh和vw值。
* { padding: 0; margin: 0; box-sizing: border-box; }
body {
padding: 30px;
}
li.track {
display: block;
font-size: 5rem;
margin-bottom: 15px;
}
li.track:hover {
color: transparent;
-webkit-text-stroke-color: #18181b;
-webkit-text-stroke-width: 3px;
}
li.track:hover .album-art {
display: block;
}
.album-art {
z-index: -10;
position: fixed;
left: 47vw;
top: 12vh;
width: 90%;
height: 50%;
max-height: 450px;
display: none;
opacity: 0.5;
overflow: hidden;
transform: translateX(-50%);
}
.album-art img {
width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
<div class="tracks">
<ol>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/michael-nau.jpg"></div>
<p class="track-name">King Princess - 'Cheap Queen'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="hhttps://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/louie-short.jpg"></div>
<p class="track-name">Charly Bliss - 'Capacity'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/P4K-Tom-Waits-Jim-Jarmusch_PitchHeader.jpg"></div>
<p class="track-name">Julia Jacklin - 'Good Guy'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/img/kevin-abstract.png"></div>
<p class="track-name">Kevin Abstract - 'Georgia'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/img/okey-dokey.jpg"></div>
<p class="track-name">Okey Dokey - 'Wag Your Tail'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/fruit-bats.jpg"></div>
<p class="track-name">Devendra Banhart - 'Kantori Ongaku'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/img/michael-nau.jpg"></div>
<p class="track-name">Michael Nau - 'Rides Through The Morning'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/fruit-bats.jpg"></div>
<p class="track-name">Hop Along - 'Prior Things'</p>
</a>
</li>
<ol>
</div>
我希望将悬停时显示的图像始终位于页面中心(滚动或不滚动)。
答案 0 :(得分:0)
尝试此CSS:
body {
padding: 30px;
}
li.track {
display: block;
font-size: 5rem;
margin-bottom: 15px;
}
li.track:hover {
color: transparent;
-webkit-text-stroke-color: #18181b;
-webkit-text-stroke-width: 3px;
}
li.track:hover .album-art {
display: block;
}
.album-art {
z-index: -10;
position: fixed;
left: 50%;
top: 50%;
width: 90%;
height: 50%;
max-height: 450px;
display: none;
opacity: 0.5;
overflow: hidden;
transform: translate(-50%,-50%);
}
.album-art img {
width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
谢谢