圖片不能正常工作

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/