Текст на картинке не работает

-1

Я использую этот метод. https://css-tricks.com/text-blocks-over-image/Текст на картинке не работает

В WordPress файле CSS я добавил этот код

.image { 
 
    position: relative; 
 
    width: 100%; /* for IE 6 */ 
 
} 
 

 
h2 { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 
h2 span { 
 
    color: white; 
 
    font: bold 24px/45px Helvetica, Sans-Serif; 
 
    letter-spacing: -1px; 
 
    background: rgb(0, 0, 0); /* fallback color */ 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 10px; 
 
} 
 

 
h2 span.spacer { 
 
    padding:0 5px; 
 
}

После сохранения файла CSS я сделать новый пост с этим кодом

<div class="image"> 
 

 
     <img src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg" alt="" /> 
 
     
 
     <h2>A Movie in the Park:<br />Kung Fu Panda</h2> 
 

 
</div>

Bu он не работает то, отображается изображение и текст отображается в нижней части, а не над изображением

источник

2016-05-12 jaseon

кажется работать в jsfiddle: https://jsfiddle.net/r4n6or2v/1/ – Andrew

Я пробовал эти, также не работает для меня в wordpress css-tricks.com/design-considerations-text-images/ – jaseon

Вы не добавили Пролисты, подобные примеру. https://jsfiddle.net/j08691/mx2jh081/ – j08691

линия, которая читает <h2>A Movie in the Park:<br />Kung Fu Panda</h2> следует читать <h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

Пожалуйста, смотрите это: https://jsfiddle.net/r4n6or2v/3/

источник

2016-05-12 13:09:14 smythluke

Текст на картинке не работает

ответ

Смежные вопросы