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>

如何在精选图片

1 个答案: