Question

你好，我真的把我的脚趾深深地插入了深度编码项目。我想如果我能学会这样做，我会走得更远。到目前为止，我对自己的努力感到非常满意，但是我会喜欢一些帮助，因为我似乎无法做我希望的事情。

我使用Drupal。您可以查看PAGE THAT I AM WORKING UPON HERE

我设法将一个块区域添加到我的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

这比使用绝对定位将文本放在图像上要灵活得多，反应灵敏得多。为此，您需要事先了解手头的图像尺寸。这将允许您添加叠加文本，标题等，没有负填充或绝对定位。它们的关键是设置填充％以匹配图像宽高比，如下例所示。我使用this answer并且基本上只添加了图像背景。然后像往常那样在主要内部放置标题，按钮等。

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

在图像上放置标题

2 个答案: