我應該如何使用CSS在我的圖片上設置這個標題？

Question

         我開始涉足響應式設計，因此我試圖找到我的CSS中的最佳實踐。我正在將標題文本放置在最終會自定義的jQuery驅動圖像滑塊上。

       所有這一切都在http://www.taylorp0994.net/websites/cincoschool/index.html運行，所以請看看現場結果和代碼以獲得更多信息。

       我已經實現了似乎是可行的解決方案;但是，我擔心不管語境如何，使用像素都不是語義上的。我如何使用百分比來實現相同的外觀，以及我應該採取什麼方法（margin-top，position：relative/top等）？除了我目前的解決方案，我還沒有取得任何明顯的成功：相對於標題框，並通過頂部移動：-46.5px。

Answer 1

您發佈的作品看起來非常有前途！

有兩件事情值得我粗略地看一下提的是：

• 沒有什麼特別的「錯誤」使用像素測量。唯一可能成爲你的問題是標題的長度。如果文本可能會改變長度（因此：滾動到兩行），則使用設置的高度調整將不起作用。
• 標題內有很多空的「p」標籤，是否有意？

我傾向於對付這種類型的任務的方法是使用定位：

• 有一個包含兩個圖像和字幕單格包裹。定位這個親戚;
• 將圖像z-index設置爲較小的數字;
• 將標題的z-index設置得更高，並將其設置爲position：absolute，bottom：0。這將使標題離開父div的底部邊緣，從而繼承它的高度。

兩秒鐘，我會發表一個例子。

在這裏你去：http://jsfiddle.net/HhuhR/這是非常快速和骯髒的，但應有助於把你在正確的軌道上：

<style> 
    .img-wrap{ 
     width: 60%; /*just here for the preview */ 
     position: relative; 
    } 
     .img-wrap img{ 
      max-width: 100%; 
      z-index: 1 
     } 
     .img-wrap .caption{ 
      display: block; 
      width: 100%; 
      position: absolute; 
      bottom: 5px; /*if using padding in the caption, match here */ 
      left: 0; 
      z-index: 2; 
      margin: 0; 
      padding: 5px 0; 
      text-indent: 5px; 
      color: #fff; 
      font-weight: bold; 
      background: rgba(0, 0, 0, 0.4); 
     } 
</style> 

<div class="img-wrap"> 
    <img src="http://taylorp0994.net/websites/cincoschool/img/slide1.png" alt= ""> 
    <span class="caption">Lorem ipsum dolor sit amet</span> 
</div> 

一定要記得爲你的視口寬度變窄，標題文本將主宰圖像（隨着圖像本身變小）。我傾向於在我的設計中確定一個問題，在這裏成爲問題並簡單地覆蓋底部/左側的字幕位置，並設置位置：相對 - 將字幕直接放在圖像下方，而不是重疊（並可能完全覆蓋） 。