旋转木马幻灯片:插入CSS和HTML的文本和链接添加

Question

我是HTML和CSS的新手。我刚刚用HTML和CSS制作了一个旋转木马幻灯片。我想在这张幻灯片的角落里插入文字。我做不到，因为我所做的一切都不起作用。单击此幻灯片时，我还试图重定向到其他页面。对不起我的英语，顺便说一句，我希望我能解释一下我的意思。

我的幻灯片的CSS和HTML：

.tech-slideshow {
height: 190px;
max-width: 2600px;
margin: 0;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 200px;
width: 2526px;
background: url(https://resmim.net/cdn/2022/10/22/OybOx.jpg);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 40s linear infinite;
}
@keyframes moveSlideshow {
50% { 
transform: translateX(-40%);  
}
}

<div class="tech-slideshow">
<div class="mover-1"></div>
</div>

Answer 1

这里有一个具有绝对定位的可能解决方案：

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.tech-slideshow {
height: 190px;
max-width: 2600px;
position: relative;
overflow: hidden;
}
.tech-slideshow__link {
display: block;
width: 100%;
height: 100%;
}
.mover-1 {
width: 2526px;
background: url(https://resmim.net/cdn/2022/10/22/OybOx.jpg);
height: 100%;
animation: moveSlideshow 40s linear infinite;
}
.mover-1-text {
position: absolute;
padding: 0.5em 2em;
color: #fff;
background-color: #000;
font-size: 1.5rem;
}
.mover-1-text1 {
left: 10px;
top: 10px;
}
.mover-1-text2 {
left: 10px;
bottom: 10px;
}
.mover-1-text3 {
right: 10px;
bottom: 10px;
}
@keyframes moveSlideshow {
50% { 
transform: translateX(-40%);  
}
}

<div class="tech-slideshow">
<a href="#" class="tech-slideshow__link" target="_blank">      
<div class="mover-1"></div>
<p class="mover-1-text mover-1-text1">Text</p>
<p class="mover-1-text mover-1-text2">Text</p>
<p class="mover-1-text mover-1-text3">Text</p>
</a>
</div>