没有div：文字标题与图像背景

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

Here's我的代码：

<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

来源

2013-03-26 user2211449

你可以将图像设置为div元素的背景吗？我想这可能是最恰当的和语义的解决方案。 – 2013-03-26 12:08:03

感谢您的回答！它现在不可能，因为我只做这个项目的CSS工作。 – user2211449 2013-03-26 12:15:46

因为你写了你不能使用图像作为背景，恕我直言，你应该这样做在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; 
}

这是当然的选择之一。

来源

2013-03-26 12:56:06

像这样的工作，显然是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-26 12:13:45 gaynorvader

你可以试试使用<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位置和absolute<figcaption>。

请小心，Internet Explorer 8及更早版本不支持<figure>标记。

阅读更多关于这东西here。

来源

2013-03-26 12:17:43 Djouuuuh

没有div：文字标题与图像背景

回答

相关问题