如何将文本和按钮添加到滑块上的第一张图片答案

【问题标题】：How to add text and buttons to the first image on my slider如何将文本和按钮添加到滑块上的第一张图片
【发布时间】：2020-07-22 20:15:27
【问题描述】：

这是我的图像滑块的 html。尝试向第一张图片添加按钮和文本，但有些东西一直覆盖。

**<div id="captioned-gallery">
    <figure class="slider">
      <figure> 
        <img src="images/multipurpose.jpg"> 
      </figure>
      <figure>
        <img src="images/sanitizer.jpg" alt>  
      </figure>
      <figure>
        <img src="images/glycerine.jpg" alt>       
      </figure>
      <figure>
        <img src="images/multipurpose.jpg" alt> 
      </figure>
      <figure>
        <img src="images/sanitizer.jpg" alt> 
      </figure>
   </figure>
 </div>**

// 这是我想在第一张图片上使用的文本和按钮。

<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-8" alt="Clean Haven Products, Clean Haven Multipurpose Soap, Affordable Soap manufacturers in Nairobi">

<div class="hero-wrapper text-center mb-4">
  <h1 class="hero-title text-white mb-4">Creating Products and Building Solutions is what
 <span class="text-primary">we do.</span>
  </h1>
    <p class="text-white-50">We would love to tell you more about us or get in touch.</p>

        <div class="mt-4">
          <a href="contact.html" class="btn btn-primary mt-2 mr-2" alt="clean haven soap">Contact Us</a>
          <a href="about.html" class="btn btn-success mt-2 mr-2">Learn More</a>
        </div>
      </div>
    </div>
  </div>
</div>

//按照 Evik 的要求，我的图像滑块的 Css 如下：-

  div#captioned-gallery {
    width: 100%;
    overflow: hidden;
    border: 0;
    padding: 0;
    margin: 0;
  }
 
  figure.slider {
    position: relative;
    width: 500%;
    height: 100%;
    padding-top: 0%;
    font-size: 0;
    animation: 30s slidy infinite; 
  }
  figure.slider figure { 
    width: 20%;
    height: 100%;
    display: inline-block;
    position: relative; 
  }

  figure.slider img {
    width: 100%;
    height: 100%;
}

//图片滑块的css结束

【问题讨论】：

你能分享你的css吗？
嗨，有 css，谢谢@EvikGhazarian
@EvikGhazarian 嘿，谢谢，这很有魅力。只是想知道如何使文本和按钮在桌面和移动版本中都具有响应性。谢谢
您可以在 CSS 中使用 @media 查询，并根据您的屏幕尺寸实现不同的样式。我已经用一些媒体查询示例更新了答案。如果有帮助，请验证答案。
啊，太好了，媒体查询也能正常工作。非常感谢 Evik。 @EvikGhazarian

标签： html css text slider

【解决方案1】：

这是我为你创造的东西。我希望这是你想要的。

添加了一个具有类内容和绝对位置的 div。您可以随意定位。我定位的方式是距离顶部25%，水平居中。

更新：更新了媒体查询。这里我只更改了不同屏幕尺寸的颜色。但是你可以改变任何你想要的东西。位置、大小等与媒体查询。

.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 25%;
    transform: translate(0,-50%);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 36px;
  }
  
  div#captioned-gallery {
    width: 100%;
    overflow: hidden;
    border: 0;
    padding: 0;
    margin: 0;
  }
 
  figure.slider {
    position: relative;
    width: 500%;
    height: 100%;
    padding-top: 0%;
    font-size: 0;
    animation: 30s slidy infinite; 
  }
  figure.slider figure { 
    width: 20%;
    height: 100%;
    display: inline-block;
    position: relative; 
  }

  figure.slider img {
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 1024px) {
.content {
color: green;
background-color: cyan;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.content {
color: red;
background-color: lightgreen;
}
}
@media screen and (max-width: 767px) {
.content {
color: blue;
background-color: yellow;
}
}

<div id="captioned-gallery">
    <figure class="slider">
      <figure> 
        <img src="https://via.placeholder.com/200">
        <div class="content">
        Hello
        </div>
      </figure>
      <figure>
        <img src="https://via.placeholder.com/200" alt>  
      </figure>
      <figure>
        <img src="https://via.placeholder.com/200" alt>       
      </figure>
      <figure>
        <img src="https://via.placeholder.com/200" alt> 
      </figure>
      <figure>
        <img src="https://via.placeholder.com/200" alt> 
      </figure>
   </figure>
 </div>

【讨论】：