Question

我想知道如何在每个滑块图像的顶部添加文本。我有以下代码html和css代码

<div class=swipe>
<img src="static/img/cuisine/piz2.jpg">
<img src="static/img/cuisine/piz2.jpg">
<img src="static/img/cuisine/piz2.jpg">
</div>  

.swipe{
    overflow:auto;
    white-space:nowrap;
}

滑块正常工作。但是当我尝试添加如下所示的文本不起作用时，

<div class="d_container">
<div class=swipe>
  <div>
      <img src="static/img/cuisine/piz2.jpg" alt="Snow" style="width:100%;">
      <div class="d_bottom-left">Bottom Left</div>
      <div class="d_top-left">Top Left</div>
      <div class="d_top-right">Top Right</div>
      <div class="d_bottom-right">Bottom Right</div>
      <div class="d_centered">Centered</div>
      <img src="static/img/cuisine/piz2.jpg" alt="Snow" style="width:100%;">
      <div class="d_bottom-left">1Bottom Left</div>
      <div class="d_top-left">1Top Left</div>
      <div class="d_top-right">1Top Right</div>
      <div class="d_bottom-right">1Bottom Right</div>
      <div class="d_centered">1Centered</div>
  </div>  
 </div>  
</div>

Answer 1

您必须将文本放置在CSS中，还需要添加@Obsidian Age提及的z-index值。

.d_bottom-left{
     position: relative;
     bottom: 0;
     left: 0;
     z-index: 999;
 }

来源：

https://www.w3schools.com/css/css_positioning.asp

https://www.w3schools.com/cssref/pr_pos_z-index.asp

CSS在图像上添加文本

1 个答案: