在 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 class 需要句号。

.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 = 的东西？

在 AngularJS 中没有在我的图片上显示文字？

Not getting Text on my Image in AngularJS?

html

css

angularjs

angular-ui-bootstrap