1

画像の上（右上隅）に見出しと背景色のテキストを配置したいのですが、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>

とフィドル

4

3 に答える 3

0

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>
于 2013-03-26T12:13:45.020 に答える
0

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

注意してください。InternetExplorer8以前のバージョンでは、<figure>タグはサポートされていません。

このようなものについて詳しくは、こちらをご覧ください。

于 2013-03-26T12:17:43.737 に答える
0

画像を背景として使用できないと書いたので、この例のように行う必要があります。

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

もちろん、これはオプションの1つです。

于 2013-03-26T12:56:06.587 に答える