javascript - 图像 slider 上的文字

Question

<div class="slider">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p>
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p>
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p>
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p>
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p>
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p>
  </div>
</div>

.slider {
    width: 500px;
  margin:  auto;
}

img {
    width: 500px;
    height: 200px;
}


   .projectnaam{
text-align:left;
font: 30px/30px 'grotesque_mtextracondensed', 'Arial Black', 'Arial Bold', sans-serif;
text-transform: uppercase;
padding:0 0 0 20px;
background-color:red;

  }

.klantnaam {
text-align:left;
font-size: 15px;
font-style: italic;
padding:0 0 0 20px;
background-color:red;

  }


$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear'
});

https://jsfiddle.net/5ox31m2a/69/

大家好，

基本上我有这个图像 slider ，在每个 slider 下面我都有一些文本。 我的问题是，当我尝试将文本定位在图像上(而不是图像下方)时，背景并没有随之而来。我尝试使用负边距顶部将文本定位在图像上。

这是我尝试的结果:

即使文本上有背景，也不会显示。

长话短说，我希望文本位于图像上而不是图像下方。 (红色背景)。

Answer 1

尝试通过absolute改变文本的position，改变它们的top/bottom。

Example DEMO