使用CSS將圖像插入Wordpress子主題hgroup

我正在研究二十幾歲的兒童主題。除了標題區域中已經存在的圖像幻燈片之外，我還想插入包含公司徽標的標題「橫幅」圖像。由於這是Wordpress，所以我只能使用CSS來做到這一點（據我所知，如果你知道不同，請說出來！我知道JQuery是一個選項，但我不知道如何將JQuery添加到WP。）。我試了幾件事：1）添加一個背景圖片到hgroup div。這看起來不起作用，因爲div不會調整大小以適應空間;該div採用背景圖像的實際大小。我也試過2）使用：after選擇器插入圖像。我不知道爲什麼這不起作用，但其中一個原因可能是：after（和：before）不支持html標籤，只是文本內容。任何人都可以驗證嗎？使用CSS將圖像插入Wordpress子主題hgroup

這裏是頭部區域的HTML，與hgroup和幻燈片：

<header id="branding" role="banner"> 
    <hgroup> 
    <h1 id="site-title"><span><a href="http://localhost/wordpress/" title="" rel="home"></a></span></h1> 
    <h2 id="site-description"></h2> 
    </hgroup> 

    <a href="http://localhost/wordpress/"><img src="" width="1000" height="288" alt="" /></a> 
</header>

這裏是我試過的CSS：

hgroup{ 
background-image: IMAGE-URL 
}

或者：

hgroup:after{ 
content: "<img src="IMAGE-URL" alt="header image">"; 
}

如果您對WP中的不同方法有任何想法，我會很感激！

來源

2013-05-13 user2378293

hgroup是最近被刪除;） – ArleyM 2013-05-13 15:34:46

hgroup元素在HTML5中已過時：http://html5doctor.com/howto-subheadings/ – diggy 2013-05-13 15:35:19

不幸的是，我不能對WordPress生成的標記做太多的工作。如果我自己構建這個東西，我肯定不會使用hgroup標記。 – user2378293 2013-05-13 18:27:18

你應該給寬度和高度屬性您的標記：

hgroup{ 
    background-image: IMAGE-URL 
    width:100%; 
    height:120px; 
}

諾塔：你應該避免已棄用此hgroup標籤。

來源

2013-05-13 16:54:03 Strategio

嗨Strategio，Twentyeleven是一個流暢的主題，所以寬度調整與瀏覽器窗口。你的方法不會強制圖像根據空間調整大小;橫幅圖像非常大，並且在瀏覽器很小的時候會跑到邊緣。我試着給出hgroup最小和最大高度和寬度，但它不會影響背景圖像，只會影響hgroup的大小。任何其他想法？ – user2378293 2013-05-13 18:25:41

如果你正在尋找一個響應式圖像塊，這將無法與CSS屬性。 – Strategio 2013-05-13 18:57:30

然後對於流體佈局，我認爲最好的選擇是將圖像插入到標題中。

編輯您的的header.php文件在你的主題（假定你的形象是你的主題的「圖片」子文件夾）：

<header id="branding" role="banner"> 
    <hgroup> 
    <img src="<?php echo get_stylesheet_directory_uri() ?>/images/my-banner.jpg" id="my-banner" alt="" title=""> 
    <h1 id="site-title"><span><a href="http://localhost/wordpress/" title="" rel="home"></a></span></h1> 
    <h2 id="site-description"></h2> 
    </hgroup>

然後，你的CSS：

#my-banner { 
    width:100%; 
    height:auto; 
}

來源

2013-05-13 19:06:41 Strategio

使用CSS將圖像插入Wordpress子主題hgroup

回答

相關問題