Question

我正在研究二十二岁的儿童主题。我想插入标题“横幅”图像，其中包括公司的徽标，以及标题区域中已有的图像幻灯片。由于这是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;
}

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

Answer 2

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

在主题中修改 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;
}

使用CSS将图像插入到Wordpress子主题hgroup中

2 个答案: