在这种情况下，显示文本的最简单方法是使用伪元素（::before 或 ::after）。不能在图片元素上使用伪元素，所以需要全部改成div。
您希望页面具有响应性，以便在不同的屏幕分辨率下看起来不错。
您希望尽可能少地重复代码，并使代码在未来易于更新。使用 CSS 变量做到这一点。
一个。在样式方面，您应该为独特的元素保留#id；尝试像您那样调用#img 可能会导致显示错误。
b.在设计中尽可能避免使用float。 position: absolute，如果可能的话。
c。恕我直言，在 left 而不是 margin-left 上制作动画感觉更好。
HTML
<div class="slideshow">
<div class="img one" data-tooltip="Fachada Canelada"></div>
<div class="img two" data-tooltip="image two"></div>
<div class="img three" data-tooltip="image three"></div>
<div class="img four" data-tooltip="image four"></div>
<div class="img five" data-tooltip="image five"></div>
<div class="img six" data-tooltip="image six"></div>
<div class="img seven" data-tooltip="image seven"></div>
<div class="img eight" data-tooltip="image eight"></div>
<div class="img nine" data-tooltip="image nine"></div>
<div class="img ten" data-tooltip="image ten"></div>
</div>
我将您的 HTML 更改为以下内容。起初有趣的是我在具有class 属性的不同div 之间有何不同。我稍后会解释data-tooltip。
幻灯片的 CSS 很简单：
.slideshow {
width: 100%;
height: 380px;
display: flex;
overflow: hidden;
}
将宽度设置为与屏幕相同的宽度（响应式！）以避免代码出现水平滚动条。使用flex 将.slideshow 中的所有子代显示在同一行。
.slideshow > .img {
min-width: 100%;`
padding-left: 50px;
box-sizing: border-box;
}
给所有的孩子一个min-width 100% 的父尺寸（即屏幕宽度的100%）。使用padding 而不是margin，因为 flex 属性在计算宽度时不能考虑边距，但它会计算填充。为了使div.img 元素保持在 100% 的最小宽度，而填充不增加额外宽度，请使用 box-sizing 让填充成为计算宽度的一部分。
.img.one {
background-image: url("https://i.stack.imgur.com/sgmyk.jpg");
}
...
.slideshow > .img {
/* ... previous CSS code */
background-position: 50px center;
background-size: cover;
background-repeat: no-repeat;
}
使用图像作为背景，并在div.img 中添加更多属性以将背景元素放置在您想要的位置。如果你想为填充腾出空间，你需要移动它50px。
.slideshow > .img {
position: relative;
/* ... previous CSS code */
}
.slideshow > .img::before {
content: attr(data-tooltip); /* displays the value of attribute data-tooltip */
position: absolute;
top: 50%; /* move it almost to the middle vertically */
left: 50px; /* take into account the padding */
right: 0px;
transform: translateY(-50%); /* Move the element up as far as half it's own size */
text-align: center;
padding: 1rem 0px; /* 1rem = the font size for your normal (bread) text */
background-color: rgba(0, 0, 0, 0.3); /* black transparent background */
color: white;
font-size: 24px;
}
现在是图片上的文字。使用伪元素::before（或::after），它需要content 属性。使用position: absolute 将文本放置在您想要的任何位置，但不要忘记将position: relative 添加到div.img。无论如何，您需要它是相对的，因为动画已更改为 left: -3800px。
data-tooltip 可以任意命名，只要它以data- 开头。 data-caption 可能是更适合它的名称。你也可以使用alt，就像content: attr(alt)一样，但这不会给其他程序员任何关于alt特殊用法的线索——将其显示为工具提示。
.slideshow > .img::before {
display: none;
/* ... previous CSS code */
}
.slideshow > .img:hover::before {
display: block;
}
但是您希望代码仅在悬停时显示，因此隐藏伪元素，然后仅在悬停时显示它div.img。
现在是可重复的部分。你可以用 CSS 变量来解决这个问题。填充在三个不同的地方写成50px。稍后对其中任何一个的更改几乎肯定不会在所有地方更新。将 CSS 变量添加到 div.img。
.slideshow > .img {
--left-spacing: 50px;
/* ... previous CSS code */
padding-left: var(--left-spacing);
/* ... */
background-position: var(--left-spacing) center;
}
.slideshow > .img::before {
/* ... previous CSS code */
left: var(--left-spacing);
/* ... */
}
...您还可以使用calc() 使动画响应。将 --slideshow-items 添加到 div.img 并在所有动画代码中使用该变量：
@keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - 1));
}
}
-1 将元素向左移动，100vm 是屏幕宽度，--slideshow-items 是我添加到div.img 以显示图像数量的CSS 变量，您需要减去@987654367 @ 从它忽略第一项的宽度，否则你会得到一个小的空白动画。
下面的完整代码，你可以试试：
.slideshow {
width: 100%;
height: 380px;
display: flex;
overflow: hidden;
}
.img.one {
background-image: url("https://i.stack.imgur.com/sgmyk.jpg");
}
.img.two {
background-image: url("https://i.stack.imgur.com/6NBDp.jpg");
}
.img.three {
background-image: url("https://i.stack.imgur.com/so5dX.jpg");
}
.img.four {
background-image: url("https://i.stack.imgur.com/KwlAe.jpg");
}
.img.five {
background-image: url("https://i.stack.imgur.com/Cl1Fj.jpg");
}
.img.six {
background-image: url("https://i.stack.imgur.com/sgmyk.jpg");
}
.img.seven {
background-image: url("https://i.stack.imgur.com/6NBDp.jpg");
}
.img.eight {
background-image: url("https://i.stack.imgur.com/so5dX.jpg");
}
.img.nine {
background-image: url("https://i.stack.imgur.com/KwlAe.jpg");
}
.img.ten {
background-image: url("https://i.stack.imgur.com/Cl1Fj.jpg");
}
.slideshow > .img {
--left-spacing: 50px;
--slideshow-items: 10;
--ignore-width-of-first-item: 1;
position: relative;
padding-left: var(--left-spacing);
box-sizing: border-box;
min-width: 100%;
background-position: var(--left-spacing) center;
background-size: cover;
background-repeat: no-repeat;
-webkit-animation: bannermove 25s linear infinite;
-moz-animation: bannermove 25s linear infinite;
-ms-animation: bannermove 25s linear infinite;
-o-animation: bannermove 25s linear infinite;
animation: bannermove 25s linear infinite;
}
.slideshow > .img::before {
display: none;
content: attr(data-tooltip);
position: absolute;
top: 50%;
left: var(--left-spacing);
right: 0px;
transform: translateY(-50%);
text-align: center;
padding: 1rem 0px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
font-size: 24px;
}
.slideshow > .img:hover::before {
display: block;
}
@keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - var(--ignore-width-of-first-item)));
}
}
@-moz-keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - var(--ignore-width-of-first-item)));
}
}
@-webkit-keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - var(--ignore-width-of-first-item)));
}
}
@-ms-keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - var(--ignore-width-of-first-item)));
}
}
@-o-keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - var(--ignore-width-of-first-item)));
}
}
}
<div class="slideshow">
<div class="img one" data-tooltip="Fachada Canelada"></div>
<div class="img two" data-tooltip="image two"></div>
<div class="img three" data-tooltip="image three"></div>
<div class="img four" data-tooltip="image four"></div>
<div class="img five" data-tooltip="image five"></div>
<div class="img six" data-tooltip="image six"></div>
<div class="img seven" data-tooltip="image seven"></div>
<div class="img eight" data-tooltip="image eight"></div>
<div class="img nine" data-tooltip="image nine"></div>
<div class="img ten" data-tooltip="image ten"></div>
</div>