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/

大家好，

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

这是我尝试的结果：

即使文本有背景，也没有显示。

这么长的故事我希望文字在图像上而不是在图像下面。（红色背景）。

Answer 1

尝试此操作并在添加样式后：

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

div {
    position: relative;
}

span { 
    position: absolute;
    bottom: 0;
    zindex: 2;
}

Answer 2

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

.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;

  }
  .main{position:relative}
  .content{position:absolute;bottom:15px;}

<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="slider">
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
          <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
                 <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
           <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
               <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
           <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
  <div class="main">
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
             <div class="content">          
           <p class="projectnaam">Project</p>
                <p class="klantnaam">Klantnaam</p></div>
  </div>
</div>

请查看以下链接。希望这就是你想要的。

[https://jsfiddle.net/5ox31m2a/73/]

Answer 3

尝试按position更改文字absolute，然后更改top/bottom。{/ p>

<强> Example DEMO

Answer 4

如果您margin-top没问题，可以尝试添加position:relative。

 .projectnaam,.klantnaam
  {
    position:relative;
  }

  .projectnaam
  {
    margin-top: -80px;
  }

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

Answer 5

<强> HTML

n: 2, a: 0, b: 1

<强> CSS

<div style="width: 500px; height: 200px;">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
<div style="position: absolute;">
    <p class="projectnaam">Project</p>
    <p class="klantnaam">Klantnaam</p>
</div>

ONLINE DEMO

图像滑块上的文字

5 个答案: