php - 如何覆盖特色图片中的帖子类型标题

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; 它不起作用(每个人都尊重每个地方)。通过 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>