html - 将标题放在图像上

Question

您好，这是我真正涉足深度编码项目。我想如果我能学会这样做，我会走得很远。到目前为止，我对自己的努力感到非常满意，但我希望得到一些帮助，因为我似乎无法做到我希望的事情。

我使用 Drupal。您可以在此处查看我正在处理的页面

我已经设法在我的 page.tpl 中添加了一个块区域（不要担心这不是一个 drupal 问题）我的块区域包含一个图像。我想在图像顶部打印我的标题。它似乎没有发生。

    <?php if ($has_header): ?>
 <!-- Header -->
  <header id="header" class="container-wrapper">
   <div class="container">
         <?php print render($page['header']) ?>

     <?php if ($title): ?>
     <?php print $breadcrumb ?>
     <?php print render($title_prefix) ?>
     <h1><?php print $title ?></h1>
     <?php print render($title_suffix) ?>
     <?php endif ?>
     <?php print $messages ?>
    <?php print render($page['help']) ?>
    <?php if ($tabs): ?><?php print render($tabs) ?><?php endif ?>
    <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links) ?></ul><?php endif ?>
   </div>
</header>
<?php endif ?>

上面第 5 行中的打印渲染页面标题位是我的图像的块区域“标题”。我希望将标题放在图像顶部的中间。

有人可以提供更多建议吗？

感谢编辑添加-

    <header id="header" class="container-wrapper">
<div class="container contextual-links-region">
 <div class="region region-header">
<h2 class="element-invisible">You are here</h2>
<div class="breadcrumb">
 <a href="/">Home</a>
 </div>
 <h1>football</h1>

Answer 1

我假设您要在图像上找到标题/文本？做这样的事情。 http://jsfiddle.net/b5Qaj/2/

制作一个包含标题和图像的外部容器 div。确保使用相对位置设置样式。然后将标题文本定位为绝对位置（这将其相对于容器 div 定位）...

<div id="container" style="position:relative;">
    <img src="http://www.hoagames.com/thumbs/1-on-1-soccer.jpg" />
    <h1 style="position:absolute; top:100px; left:20px;"> This text is on top of the image </h1>    
</div>

Answer 2

这比使用绝对定位在图像上放置文本要灵活得多，并且响应速度更快。为此，您需要事先知道图像大小，这您通常会这样做。这将允许您添加覆盖文本、标题等，而无需负填充或绝对定位。他们的关键是设置填充百分比以匹配图像纵横比，如下例所示。我使用了这个答案，基本上只是添加了一个图像背景。然后像往常一样将您的标题、按钮等放置在 main 中。

.wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  background-size: contain !important;
  background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
  margin: 0 auto;
}
.wrapper:after {
  padding-top: 75%;
  /* this llama image is 800x600 so set the padding top % to match 800/600 = .75 */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  text-align: center;
  margin-top: 5%;
}

<div class="wrapper">
  <div class="main">
    This is where your overlay content goes, titles, text, buttons, etc.
  </div>
</div>