沒有div：文字標題與圖像背景

我想將背景顏色的標題+文字放在圖像上（在右上角），但我不知道它是否可以在沒有div的情況下工作h1和p標籤。它可以與鏈式選擇器一起工作嗎？我有點困惑。你將如何解決這個定位問題？沒有div：文字標題與圖像背景

Here's我的代碼：

<div class="class1 class2 "> 
     <h1>headline</h1> 
     <p>text</p> 
     <figure class="class3 class4"> 
       <img class="at2x" width="950" height="609" alt="" src=""> 
     </figure> 
</div>

和fiddle

來源

2013-03-26 user2211449

你可以將圖像設置爲div元素的背景嗎？我想這可能是最恰當的和語義的解決方案。 – 2013-03-26 12:08:03

感謝您的回答！它現在不可能，因爲我只做這個項目的CSS工作。 – user2211449 2013-03-26 12:15:46

因爲你寫了你不能使用圖像作爲背景，恕我直言，你應該這樣做在this example。

HTML

<div class="class1 class2 "> 
     <h1>headline</h1> 
     <p>text</p> 
     <figure class="class3 class4"> 
      <img class="at2x" width="950" height="609" alt="" src="http://placekitten.com/950/609"> 
     </figure> 
</div>

CSS

.class1 { 
    position: relative; 
} 
.class3 { 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    margin: 0; 
}

這是當然的選擇之一。

來源

2013-03-26 12:56:06

像這樣的工作，顯然是class，而不是style=會更好：

<div class="class1 class2" style="position: relative"> 
    <h1 style="position: absolute; top: 20px; left: 20px; background-color: #DDD;">headline</h1> 
    <p style="position: absolute; top: 40px; left: 20px; background-color: #DDD;">text</p> 
    <figure class="class3 class4" style="position: absolute; top:0; left: 0;"> 
     <img class="at2x" width="950" height="609" alt="" src=""> 
    </figure> 
</div>

來源

2013-03-26 12:13:45 gaynorvader

你可以試試使用<figcaption>標籤，相對於<figure>標籤：

<div class="class1 class2 "> 
    <figure class="class3 class4"> 
      <img class="at2x" width="950" height="609" alt="" src=""> 
      <figcaption> 
       <h1>headline</h1> 
       <p>text</p> 
      </figcaption> 
    </figure> 
</div>

我建議把你<figure>在relative位置和absolute<figcaption>。

請小心，Internet Explorer 8及更早版本不支持<figure>標記。

閱讀更多關於這東西here。

來源

2013-03-26 12:17:43 Djouuuuh

沒有div：文字標題與圖像背景

回答

相關問題