0

我正在制作一个 211 岁的儿童主题。除了标题区域中已经存在的图像幻灯片之外，我还想插入包含公司徽标的标题“横幅”图像。由于这是 Wordpress，我只能使用 CSS 来做到这一点（据我所知，如果你知道不同，请说出来！我知道 JQuery，所以这可能是一个选项，但我不知道如何将 JQuery 添加到 WP。 ）。我尝试了一些事情：1）将背景图像添加到 hgroup div。这似乎不起作用，因为 div 不会调整大小以适应空间；div 采用背景图像的实际大小。我也尝试过 2) 使用 :after 选择器插入图像。我不确定为什么这不起作用，但原因之一可能是：after（和：before）不支持html标签，只支持文本内容。

这是标题区域的 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 中完成此任务的不同方法有任何想法，我将不胜感激！

4

2 回答 2

0

您应该为您的标签提供宽度和高度属性：

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

注意：你应该避免使用这个已经被弃用的 hgroup 标签。

于 2013-05-13T16:54:03.987 回答
0

然后对于流畅的布局，我认为更好的选择是在标题中插入图像。

在你的主题中编辑你的header.php文件（假设你的图片在你的主题的“images”子文件夹中）：

<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-13T19:06:41.137 回答