文本放置在一個盒子裏的幻燈片

目前在幻燈片放映一個畫面中按字（使用unslider.js）看起來是這樣的： enter image description here 文本放置在一個盒子裏的幻燈片

我爲每個圖像的HTML是這樣的：

<li style="background-image: url('<?php echo get_template_directory_uri();?> /images/photos/pearl2.jpg');"> 

     <h1>The jQuery slider that just slides2 2.</h1> 
      <p>No fancy effects or unnecessary markup, and it’s less than 3kb. 2</p> 
      <a class="btn" href="#download">Download</a> 

     </li>

現在我想要做的是將h1，p和一個錨點放在圖像右側的方形框中，但我很難找出如何去做。我發現unslider有完整的選項，可以用來做這種事情，但不知道如何使用它。關於我應該研究的相同的任何建議？

當前CSS：

body.page-id-7 .banner { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 

    font-size: 18px; 
    line-height: 24px; 
    text-align: center; 

    color: rgba(255,255,255,.6); 
    text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); 

    background: #ffffff; 
    box-shadow: 0 1px 2px rgba(0,0,0,.25); 
} 

body.page-id-7 .banner ul { 
     list-style: none; 
     width: 300%; 
    } 


body.page-id-7 .banner ul li { 
     display: block; 
     float: left; 
     width: 33%; 
     padding: 160px 0 110px; 

     min-height: 400px; 

    -webkit-background-size: 100% 100%; 
     -moz-background-size: 100% 100%; 
     -o-background-size: 100% 100%; 
     -ms-background-size: 100% 100%; 
     background-size: 100% 100%; 

     box-shadow: inset 0 -3px 6px rgba(0,0,0,.1); 
    } 
/*body.page-id-7 .banner .placing {position:absolute; background:#ccc; padding:10px; right:0; bottom:0}*/ 
body.page-id-7 .banner h1, .banner h2 { 
     font-size: 40px; 
     line-height: 52px; 

     color: #fff; 
    }

來源

2014-01-06 nathandrake

燦你也探索你的CSS。 – Anup

給我的CSS代碼 –

你將不得不從li這裏<li style="background-image: url('<?php echo get_template_directory_uri();?> /images/photos/pearl2.jpg');">背景中消除圖像。並嘗試一些不同的標記和css，如將div放置在li之內，並將圖像放置在float left和h1,p,anchor到float right之間。

來源

2014-01-06 06:44:07 Dharmang

我不能添加多個背景像一個在李水平和第二個在內部div水平？ – nathandrake

天空是限制，無論你可以實現與HTML和CSS內的列表項將被滑塊使用。這就是爲什麼它在那裏。 – Dharmang

您需要在CSS的工作，就像一試，應用以下風格<li>： -

li { 
    text-align: right; 
}

來源

2014-01-06 06:48:59 Anup

你可以試試這個..

小提琴：click here

<div style="position:absolute; background:#ccc; padding:10px; right:0; bottom:0"> 
     <h1>The jQuery slider that just slides2 2.</h1> 
     <p>No fancy effects or unnecessary markup, and it’s less than 3kb. 2</p> 
     <a class="btn" href="#download">Download</a> 
</div>

來源

2014-01-06 07:21:27

我試過這一個，它只適用於最後一張幻燈片，而不是幻燈片中的每張幻燈片..任何想法如何解決它？ – nathandrake

文本放置在一個盒子裏的幻燈片

回答

相關問題