Wordpress - 在包裝器上方擴展部分透明的標題圖像

Question

平台：Wordpress（自托管）模板：TwentyTen

我已經能夠通過谷歌搜索或修改樣式表中熟悉的部分來解決大多數事情，但我現在被卡住了，希望有人能幫助我。 基本上，我想在設計中創建一個與此類似的標題（ http://albertaspeechie.blogspot.com ），標題背景的那部分將是透明的。

如果我創建一個帶有透明部分的圖像，它會顯示為白色，因為它仍然在帶有白色背景的標題/包裝器中。

我在想，可能將標題背景設置為透明（盡管我不知道如何使標題透明，而不影響包裝器的其余部分）並在包裝器上方增加填充。 並增加標題的高度。 我曾經知道如何增加標題的高度，但我似乎再也找不到它了。

關於我如何做到這一點的任何建議？ 我目前只是在忙着測試博客，所以沒有可顯示的已發布網站。 目前它只是一個直二十，沒有任何調整，直到我能弄清楚如何做一個部分透明的標題。

提前致謝。

編輯：我不知道為什么人們不贊成這個。 我遵守了規則和指示。

Answer 1

您可以使用定位將圖像移到標題外。

1. 在標題中添加要使用的圖像。 確保圖像具有透明背景 - 例如使用 png 文件。

2. 添加position: relative對於標題

3. 為圖像添加position: absolute ，然后為圖像提供坐標。

要將其放置在標題之外，請為top提供一個負值。 要使圖像居中，將 0 添加到left和right ，然后使用margin: auto.

.header img {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  margin: auto;
}

 body, html { height: 100%; padding: 0; margin: 0; background: lightblue; } .wrapper { margin: 0 auto; width: 50%; height: 100%; background-color: lightyellow; margin-top: 150px; } .header { background-color: white; width: 100%; height: 200px; position: relative; } .header img { position: absolute; top: -100px; left: 0; right: 0; margin: auto; }

 <div class="wrapper"> <div class="header"> <img src="http://placehold.it/250x250" alt="" /> </div> </div>

代碼筆演示

在此處閱讀有關定位的更多信息。