css - 图片上的文字不起作用

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>

但是它不起作用，图像被显示并且文本显示在底部而不是图像上

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/