Php 如何从特色图片中覆盖帖子类型标题

我使用这个WP_查询从我的帖子类型中获取标题和特色图片

 <div class="job-cont">
      <?php 
      $query = new WP_Query( array( 'post_type' => 'jobs' ) );

    if ( $query->have_posts() ) :

       while ( $query->have_posts() ) : $query->the_post(); ?>
        <a href="<?php the_permalink (); ?>">
                    <h1 class="the_job_title"><?php the_title(); ?></h1>
                    <img class="the_job_image" src=<?php the_post_thumbnail ();?>
                </a>    
      <?php  endwhile;

    endif;
        ?>
    </div>

---

也许有办法

之所以会发生这种情况，是因为您将绝对位置的元素引用到同一个相对容器，所以每个标题都会获得相同的绝对位置

试试这个：

 <div class="job-cont">
  <?php 
  $query = new WP_Query( array( 'post_type' => 'jobs' ) );

if ( $query->have_posts() ) :

   while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="title_image_container">
        <a href="<?php the_permalink (); ?>">
                <h1 class="the_job_title"><?php the_title(); ?></h1>
                <?php the_post_thumbnail();?>
            </a> 
    </div>   
  <?php  endwhile;

endif;
    ?>
</div>

如果需要，也可以将图像作为容器的背景

这样：

<div class="job-cont">
  <?php 
  $query = new WP_Query( array( 'post_type' => 'jobs' ) );

if ( $query->have_posts() ) :

   while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="title_image_container" style="background:url('<?php the_post_thumbnail_url();?>') center no-repeat">
        <a href="<?php the_permalink (); ?>">
                <h1 class="the_job_title"><?php the_title(); ?></h1>
            </a> 
    </div>   
  <?php  endwhile;

endif;
    ?>
</div>

---

你想达到什么目标？不清楚。。。你能发布你的css吗？是的，对不起。现在也是我的CSS。但老实说，我甚至不认为这是完全正确的。真正的问题是php显示文章类型中的每个标题和特征图像。我无法在每张图片上定位标题。在绝对位置上，它们像一个整体一样一起工作。希望我解释得足够好。谢谢你的时间。第一个有效。只要一点CSS就可以了。第二个选项我认为是sintax错误。非常感谢Daniele！

.title_image_container {position: relative}

<div class="job-cont">
  <?php 
  $query = new WP_Query( array( 'post_type' => 'jobs' ) );

if ( $query->have_posts() ) :

   while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="title_image_container" style="background:url('<?php the_post_thumbnail_url();?>') center no-repeat">
        <a href="<?php the_permalink (); ?>">
                <h1 class="the_job_title"><?php the_title(); ?></h1>
            </a> 
    </div>   
  <?php  endwhile;

endif;
    ?>
</div>