css - 使用 CSS 将图像插入 Wordpress 子主题 hgroup

Question

我正在研究二十一岁的 child 主题。除了页眉区域中已有的图像幻灯片之外，我还想插入一个页眉“横幅”图像，其中包括公司的 Logo 。由于这是 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 中完成这项工作的不同方法有任何想法，我将不胜感激!

Answer 1

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

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

注意:您应该避免使用这个已弃用的 hgroup 标签。