在图像底部启动内容容器

Question

所以我想显示我的内容显示在我的图像上，但只是轻微地显示。 因此，从某种意义上说，图像看起来像是页面背景的一部分。 然而，我不希望我的内容框像当前图像那样拉伸到页面的整个宽度。

这是我正在处理的页面； http://outside.hobhob.uk/test/?portfolio=mind-the-gap-2

这就是我的目标，使其看起来类似于（仅关注内容文本框如何稍微超出图像）：https://s32.postimg.org/ytavty67p/13340631_10154339496581336_223276410_o.jpg

有没有办法通过稍微改变内容框的 css 来实现这一点？ 也许改变位置或 z 索引？

页面的代码目前正在以典型的方式工作，我还使用 Visual Composer 来布局页面中的内容，所以这可以帮助我以更简单的方式实现这一点？

<div class="pagewidth">
  <div class="content single single-portfolio">
    <div class="post-content">
      <article id="post-<?php the_ID(); ?>" <?php post_class("post post-content-full"); ?>>
        <div class="portfolio-attachment">
          <?php
            $pi_data = get_port_item_content(get_the_ID());
            $n = 0;
            the_post_thumbnail();
            if ($pi_data) {
              foreach ($pi_data as $content_info) {
                switch ($content_info->type) {
                  case "image":
                    ?>
                      <div class="item image"><img
                        src="<?php echo $content_info->url?>"/></div>
                      <?php
                    break;
                  case "youtube":
                    //check to see if the video has any options, the ? sign
                    $has = strstr($content_info->url, "?");

                    if (!$has) {
                      $embed = explode('"', $content_info->url);
                      // insert enablejsapi option
                      $embed[5] .= "?wmode=transparent";
                      $embed = implode('"', $embed);
                    } else {
                      // insert enablejsapi option
                      $embed = str_ireplace("&", "&amp;", $content_info->url);
                      $embed = str_ireplace("?", "?wmode=transparent&amp;", $embed);
                    }

                    // get original dimensions
                    $pattern = "/height=\"[0-9]*\"/";
                    preg_match($pattern, $embed, $matches);
                    $origHeight = preg_replace("/[^0-9]/", '', $matches[0]);

                    // compute new height
                    //$newHeight = $origHeight + 25;
                    $newHeight = $origHeight;

                    // adjust embed code
                    $pattern = "/height=\"[0-9]*\"/";
                    $embed = preg_replace($pattern, "height='" . $newHeight . "'", $embed);

                    // insert an id for the iframe
                    $id = '<iframe id="ytplayer' . $n . '" ';
                    $embed = str_ireplace("<iframe ", $id, $embed);
                    ?>
                      <div class="item youtube fitvid"><?php echo $embed?></div>
                      <?php
                    break;
                  case "vimeo":
                    $embed = $content_info->url;
                    ?>
                      <div class="item vimeo fitvid"><?php echo $embed?></div>
                      <?php
                    break;
                }
                //end switch
                $n++;
              } //end for each
            }//end if
          ?>
      </div>
</div></div></div>
<div class="pagewidth-single">
<div class="content single single-portfolio">
  <div class="post-content">
    <header class="content-headarea">
      <div class="content-headarea-title">
&nbsp;
&nbsp;
        <h1 class="post-title"><?php the_title(); ?></h1>
        <ul class="portfolio-meta">
          <?php $client = get_post_meta(get_the_ID(), 'client', true); ?>
          <?php if (!empty($client)) : ?>
          <li class="client">
            <span class="portfolio-meta-heading"><?php _e('Client: ', 'framework'); ?></span>
            <span><?php echo $client ?></span>
          </li>
          <?php endif; ?>
          <?php $date = get_post_meta(get_the_ID(), 'date', true); ?>
          <?php if (!empty($date)) : ?>
          <li class="date">
            <span class="portfolio-meta-heading"><?php _e('Date: ', 'framework'); ?></span>
            <span><?php echo $date ?> </span>
          </li>
          <?php endif; ?>
          <?php $lproj = get_post_meta(get_the_ID(), 'url', true);
          if (!empty($lproj)) :
          ?>
          <li class="launch">
            <span class="portfolio-meta-heading"><?php _e('url', 'framework'); ?></span>
            <a href="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>"
              class="superlink"
              title="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>">
              <?php echo get_post_meta(get_the_ID(), 'url', true); ?>
            </a>
          </li>
          <?php endif; ?>
        </ul>
      </div>
    </header>      
        <div class="blog-post">
          <div class="full-post">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
              <?php the_content(); ?>
            <?php endwhile; ?>
            <?php else:?>

            <?php endif; ?>
          </div>
        </div>

        <?php get_template_part( '/includes/share'); ?>
        <?php comments_template(); ?>

        <nav id="post-nav">
          <div class="post-nav-inner">
            <div class="nav-previous"><?php next_post_link( '%link', __( 'Next Post &rarr;', 'framework' ) ); ?></div>
            <div class="nav-next"><?php previous_post_link( '%link', __( '&larr; Previous Post', 'framework' ) ); ?></div>
            <div class="clearfix"></div>
          </div>
        </nav>

      </article>
    </div>
  </div>
</div>

因此，我希望从页面标题开始在

<header>

部分开始叠加，同时将特色图像保留为全宽背景'ish half 部分。 我想避免图像基本上覆盖屏幕，这样您就可以开始看到内容，而无需向下滚动。

Answer 1

有没有办法通过更改 css 来实现这一点 内容框咯？也许改变位置或 z 索引？

是的，您可以使用

position: relative

和

top: {n}px

轻松更改位置。尝试添加这个CSS：

div.pagewidth-single div.post-content {
    position: relative;
    top: -150px;
}