css - 不带 div：在图片上显示带有背景的标题

Question

我想在图像上放置带有背景颜色的标题+文本（在右上角），但我不知道如果没有围绕 h1 和 p 标签的 div 是否可以工作。它可以与链式选择器一起使用吗？我有点困惑。你将如何解决这个定位问题？

这是我的代码：

<div class="class1 class2 ">
        <h1>headline</h1>
        <p>text</p>
        <figure class="class3 class4">
              <img class="at2x" width="950" height="609" alt="" src="">
        </figure>
</div>

和一把小提琴

Answer 1

像这样的东西会起作用，显然class不是style=更好：

<div class="class1 class2" style="position: relative">
    <h1 style="position: absolute; top: 20px; left: 20px; background-color: #DDD;">headline</h1>
    <p style="position: absolute; top: 40px; left: 20px; background-color: #DDD;">text</p>
    <figure class="class3 class4" style="position: absolute; top:0; left: 0;">
        <img class="at2x" width="950" height="609" alt="" src="">
    </figure>
</div>

Answer 2

您可以尝试使用<figcaption>与标签相关的<figure>标签：

<div class="class1 class2 ">
    <figure class="class3 class4">
          <img class="at2x" width="950" height="609" alt="" src="">
          <figcaption>
              <h1>headline</h1>
              <p>text</p>
          </figcaption>
    </figure>
</div>

我建议把你<figure>放在relative位置和<figcaption>。absolute

注意，Internet Explorer 8 及更早的版本，不支持<figure>标签。

在此处阅读有关此内容的更多信息。

Answer 3

因为你写了你不能使用图像作为背景，恕我直言，你应该像这个例子那样做。

HTML

<div class="class1 class2 ">
        <h1>headline</h1>
        <p>text</p>
        <figure class="class3 class4">
          <img class="at2x" width="950" height="609" alt="" src="http://placekitten.com/950/609">
        </figure>
</div>

CSS

.class1 {
  position: relative;
}
.class3 {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  margin: 0;
}

这当然是其中一种选择。