如何在CSS中的圖像中定位文本

CSS：

.container { 
    position: relative; 
    width: 100%; 
} 

.summary-screen .thumbnail { 
    height: 100%; 
    width: 100%; 
    margin: auto; 
    border: 1px solid #cbcbcb; 
    display: block; 
    margin-top: 109px; 
    position: relative; 
} 

.summary-screen .primary-text { 
    background:lightblue; 
    height: 5%; 
    opacity: 0.5; 
    position: absolute; 
    top: 85%; 
/* width: 80%; */ 
    text-align: left; 
    font-size: 20px; 
    color: black; 
}

HTML：

<div class="summary-screen"> 

    <div class="container"> 
    <div layout="row" layout-align="center"> 
     <md-content> 
      <img ng-show="$ctrl.package.image" flex="85" class="thumbnail" ng-src="{{ $ctrl.package.image }}" /> 
     </md-content> 
    </div> 

     <div layout="row" layout-align="left"> 
      <h4 class="primary-text" flex style="text-align: left;">{{ $ctrl.package.name }}</h4> 
     </div> 
    </div> 
</div>

這是如何工作的，現在（它太多留給就像你看到的，我想這正是在正確的地方，我想，背景將沿着所有的PIC向右

來源

2017-01-09 Tom Cohen

可以建議使用

他們內置到HTML5，並通過CSS類似的訪問。 – rrd

你想對齊右側的「LG_fRONT_fRAME_2016」嗎？低於圖片？ – user7357089

你的問題不清楚！ – user7357089

當你包裹您的文字和圖像，您就可以將文本「粘」到底部。

HTML/CSS

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style type="text/css"> 
     .container_relative { 
      position: relative; 
      width: 100%; 
      max-width: 500px; 
     } 
     .container_relative .text { 
      position: absolute; 
      bottom: 0; 
      background-color: rgba(0,0,255,0.5); 
      width: 100%; 
     } 
     .container_relative img { 
      width: 100%; 
      display: block; 
     } 
    </style> 
</head> 
<body> 

<div class="container_relative"> 
    <img src="https://dummyimage.com/500x400/c9c9c9/00000"> 
    <div class="text"> 
     <p>Lorem Ipsum</p> 
    </div> 
</div> 


</body> 
</html>

來源

2017-01-09 08:46:41 jaws

如何在CSS中的圖像中定位文本

回答

相關問題