如何在Bootstrap中的圖像上顯示文本3.1

從本質上講，這是我的代碼如下所示：

<div class="ek-background"> 
<div class="row"> 
<section id="container"> 
    <div class="container col-sm-4 col-sm-offset-2"> 
    <div class="pull-right"> 
     <h1>TITLE HERE</h1> 
      <h2>Let us build your preview for free</h2> 
    </div> 
     <img src="img/img/flow-1.png" class="align-center img-responsive"> 
      <div class="col"> 
       <div class="col-sm-4"> 
        <p>this is a test</p> 
    </div> 
</div> 
</div>

我不能設法得到「這是一個測試」到圖像的建議部分。

我想使用bootstrap.min.css的參數來保持一致。此外，由於這將是一個響應式設計的網站，我想文本響應與圖像，以便它不會失去其位置

如果有人可以幫助，那將是巨大的:)

來源

2014-03-02 user2231397

的可能重複[如何通過在CSS定位圖像文本（http://stackoverflow.com/questions/8708945/how-to-位置文本過的，我mass-in-css） – davethecoder

http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css – davethecoder

我不要認爲這是可能的使用引導類。您可以通過將thumbnail添加到圖片和thumbnail_legend到下一個 div來做類似的操作。

.thumbnail_legend { 
    background: none repeat scroll 0 0 #FFFFFF; 
    opacity: 0.5; 
    top:0; 
    left:0; 
    position: absolute; 
} 

.thumbnail { 
    position:relative; 
}

來自：Bootstrap 3: Text overlay on image

來源

2014-03-02 00:08:23

這沒有奏效。除了文字對圖像沒有反應，這意味着當圖像縮小時，我將失去文本的位置。感謝張貼雖然:) – user2231397

您需要粘貼額外的CSS給我們你處理什麼用確切的想法，但這裏是我的2美分反正：

1）啓動放置圖像和一些文本將包含他們兩個：

<div class="imageAndText"> 
    <img src="img/img/flow-1.png" class="align-center img-responsive"> 
    <div class="col"> 
     <div class="col-sm-4"> 
      <p>this is a test</p> 
     </div> 
    </div> 
</div>

（小心，你的原代碼有一個額外的）

2）添加絕對定位+的z-index：

.imageAndText {position: relative;} 
.imageAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}

這裏有一個的jsfiddle說明：http://jsfiddle.net/sX982/

來源

2014-03-02 00:13:18

我可以提出一個方法去解決這個問題：你可以使用一個旋轉木馬與單個項目，因爲你可以輪播圖片由於插入的文本字幕：

<div id="mycarousel" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="img/yourimage.png" alt="" class="img-responsive"> 
      <div class="carousel-caption"> 
      Insert your text here ! 
      </div> 
     </div> 
    </div> 
</div>

來源

2014-03-02 22:13:29

如何在Bootstrap中的圖像上顯示文本3.1

回答

相關問題