0
<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/テキスト
みなさん、こんにちは、
は基本的に私は、各スライダの下で、私はいくつかのテキストを持って、この画像のスライダーを持っています。 私の問題は、画像の上にテキストを配置しようとするときです（画像の代わりに）背景が付いていないことです。私は負のマージントップの画像上にテキストを配置しようとしました。
これは私の試みの結果であった：テキストの背景があってもカントー
、それは表示されません。
ストーリーが短いので、画像の下になくテキストの上に置いてください。 （赤い背景で）。