我用 3 张图片做了一个非常简单的 Unslider 设置,我尝试在上面覆盖一个 h1 文本,但是当我这样做时,我的 slider 上方的 div 中出现了一个奇怪的水平空间 ( See image )
这是我的代码:
<div class="photos" id="photos">
<h1 class="photos-title">P H O T O G R A P H Y</h1>
<div class="my-slider">
<ul>
<li><img src="images/image1.jpg" alt=""></li>
<li><img src="images/image2.jpg" alt=""></li>
<li><img src="images/image4.jpg" alt=""></li>
</ul>
</div>
</div>
还有我的 CSS:
.photos{
width: 100%; height: 100vh;
}
.my-slider{
width: 100%; height: 100vh;
margin: 0; padding: 0;
z-index: 0;
}
.photos-title{
font-family: "Anton";
position: relative;
z-index: 1;
margin: 0; padding: 0;
top: 50%;
transform: translate(0,-50%);
}
最佳答案
这个空间是为标题预留的地方,
使用 position:absolute
.photos-title {
position: absolute;
}
.photos{
position: relative;
}
关于jquery - CSS:在 Unslider 上覆盖文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43711304/