如何从特色图片中叠加帖子类型的标题

Question

我正在使用这个 WP_Query 从我的帖子类型中获取标题和特色图片。

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

现在，CSS 想要赋予样式并将标题放在每个特色图像的前面。但是position: relative; 它不起作用（每个人都尊重每个地方）。 By position:absolute; 帖子类型的所有标题都位于页面中的同一位置。我已经搜索是否可以通过 CSS 调用每个数组位置并给它自己的位置，但我认为这是不可能的。

    .job-cont {
        position:relative;
        height:40%;
        width: 30%;
        z-index: 1;
    }
    .job-cont a {
        text-decoration: none !important;
    }

    .the_job_title {
        overflow: hidden;
        float: right;
        z-index:3;
    }

    .the_job_image {
        max-height: 100%;
        max-width: 100%;
        position:relative;
        filter: brightness(72%);
        display: inline-block;
        z-index:2;
    }  

也许有办法？

Answer 1

这是因为您将绝对定位的元素引用到同一个相对容器，所以每个标题都获得相同的绝对位置。

试试这个：

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

CSS

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