Question

我有以下HTML并想使用CSS添加图像 UNDER h1。

<div class="wf-wrap">
    <div class="page-title-head hgroup">
        <h1>Kookshop</h1>
    </div>
    <div class="page-title-breadcrumbs">...</div>
</div>

这是我要添加的图像：https://www.fs-d.be/wp-content/uploads/knife-300.png

您将如何做？我知道我们可以在CSS中使用::after选择器在标题后添加文本，但我真的很想在图像的下添加图像。

Answer 1

如果您想使用:after解决方案，这可能会有所帮助。设置display: block将使其显示在标题下方。

h1:after {
  content: url('https://www.fs-d.be/wp-content/uploads/knife-300.png');
  display: block;
}

<div class="wf-wrap">
    <div class="page-title-head hgroup">
        <h1>Kookshop</h1>
    </div>
    <div class="page-title-breadcrumbs">...</div>
</div>

Answer 2

这是使用position absolute，z-index和content: url()的一种方法。

.page-title-head.hgroup {
  position: relative;
}
.page-title-head.hgroup::after {
  content: url('https://www.fs-d.be/wp-content/uploads/knife-300.png');
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
}

<div class="wf-wrap">
    <div class="page-title-head hgroup">
        <h1>Kookshop</h1>
    </div>
    <div class="page-title-breadcrumbs">...</div>
</div>

无所事事

https://jsfiddle.net/2qsdywpk/2/

进一步阅读

Answer 3

您可以使用background选择器中的:after属性来实现它。

下面的代码。

JS Fiddle

Answer 4

.h1 {
  position: relative;
}

.h1:after {
  content: "";
  background-image: url(https://www.fs-d.be/wp-content/uploads/knife-300.png);
  width: 150px;
  height: 20px;
  background-size: cover;
  display: block;
}

<div class="wf-wrap">
  <div class="page-title-head hgroup">
    <h1 class="h1">Kookshop</h1>

  </div>
  <div class="page-title-breadcrumbs">...</div>
</div>

使用CSS在文本下添加图像

4 个答案: