没有在 AngularJS 中的图像上显示文本？

Question

 .relative{
    position:relative; 
    width:600px;
}
.absolute-text{
    position:absolute; 
    bottom:0; 
    font-size:24px; 
    font-family:"vedana"; 
    background:rgba(251,251,251,0.5);
    padding:10px 20px; 
    width:100%; 
    text-align:center;
}
.absolute-text a{
    font-size:16px; 
    color:#b92b27;
}

我想在来自后端的图像上写电影名和电影明星名，但我不能这样做。

 <div class="relative">
      <img src="{{{movie.Poster}}" alt="">
      <p class="absolute-text">{{movie.Title}} </p>
</div>

Answer 1

我注意到了几个错别字。首先，relative 类需要一个句点。

.relative{
    position:relative; 
    width:600px;
}

其次，您的图像源中的花括号太多：

<div class="relative">
      <img src="{{movie.Poster}}" alt="">
      <p class="absolute-text">{{movie.Title}} </p>
</div>

假设这些不是罪魁祸首，您是否检查了absolute-text 元素以查看它是否出现在 DOM 中？如果它出现在 DOM 中但你在页面上看不到它，你可以尝试给它一个大于 0 的 z-index 属性，例如：

.absolute-text{
    position:absolute; 
    bottom:0; 
    font-size:24px; 
    font-family:"vedana"; 
    background:rgba(251,251,251,0.5);
    padding:10px 20px; 
    width:100%; 
    text-align:center;
    z-index: 10;
}

最后，您的movie.Title 范围是否正确？我的意思是你的控制器中是否有类似于$scope.movie.Title = 的东西？