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>

和fiddle

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>标记。

详细了解这些内容here。

Answer 3

因为你写道你不能使用图像作为背景，所以你应该像this example一样。

<强> 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;
}

这当然是其中一个选择。

没有div：在图像上标出背景标题

3 个答案: