2

こんにちは、私は本当に深いコーディング プロジェクトに足を踏み入れています。これを学ぶことができれば、私は遠くまで来たと思います。これまでの努力にはとても満足していますが、私が望んでいたことができないように見えるので、少し助けていただければ幸いです.

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

2 に答える 2

0

これは、絶対配置を使用して画像の上にテキストを配置するよりもはるかに柔軟で、応答性がはるかに高くなります。これを機能させるには、通常行う前に画像サイズを知る必要があります。これにより、負のパディングや絶対配置なしで、オーバーレイ テキストやタイトルなどを追加できます。以下の例に示すように、画像の縦横比に合わせてパディング % を設定することが重要です。私はこの回答を使用し、基本的に画像の背景を追加しました。次に、通常どおり、メインの中にタイトル、ボタンなどを配置します。

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

于 2015-10-12T19:39:01.983 に答える