文字圖像滑塊

<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/文字圖像滑塊

大家好，

基本上我有這個圖像滑塊，每個滑塊下我有一些文字。我的問題是，當我嘗試將文本放置在圖像上（而不是圖像下）時，背景不附帶它。我嘗試將圖片上的文字置於負邊界之上。

這是我嘗試的結果是：

即使壽有上的文字的背景下，它並不顯示。

這麼長的故事短我想要的文字在圖像上，而不是在圖像下。（有紅色背景）。

來源

2016-06-22 kevin seda

嘗試通過absolute改變文本的position並改變它們的top/bottom。

Example DEMO

來源

2016-06-22 07:37:27 Alexis

試試這個，添加你的風格後：

<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; 
}

來源

2016-06-22 07:37:00

$('.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/]

來源

2016-06-22 07:37:20

如果margin-top對你合適，你可以嘗試添加position:relative。

.projectnaam,.klantnaam 
    { 
    position:relative; 
    } 

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

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

來源

2016-06-22 07:43:38

HTML

<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>

CSS

img { 
    width: 500px; 
    height: 200px; 
    position: absolute; 
} 
.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; 
    margin-top: 100px; 
}

ONLINE DEMO

來源

2016-06-22 07:48:25

文字圖像滑塊

回答

相關問題