2017-02-06 3 views
1
.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; 
} 

Я хочу написать название фильма и название кинозвезды на изображении, которое будет получено от Back End. Но я не могу этого сделать.Не получать текст на моем изображении в AngularJS?

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

ответ

0

Было несколько опечаток, которые я заметил. Во-первых, класс 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, например:

.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 = где-то в вашем контроллере?

+0

Да, его появление на странице. –

+0

Прогресс. Итак, чтобы быть понятным, вы видите, что элемент появляется на странице, а не текст для фильма, это правильно? Попробуйте дать элементу '.absolute-text' свойство отображения, например' display: inline-block; '. – Jef

+0

Да, это проблема. –