图像上的文字不起作用

Question

我正在使用这种方法。 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不起作用图像显示，文本显示在底部而不是图像上

Answer 1

读取<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/