我用的是2017年的Wordpress主题。我正在尝试为静态首页执行类似于下图的操作：

目前，这是我网站上的图片：

文章标题当前位于图像底部。我希望它能出现在上面的图片中。

现在在我的代码中，我有来自2017主题的默认代码content-front-page.php 正在填充post线程。以下内容：

<article id="post-<?php the_ID(); ?>" <?php post_class( \'twentyseventeen-panel \' ); ?> >

<?php if ( has_post_thumbnail() ) :
    $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'twentyseventeen-featured-image\' );

    $post_thumbnail_id = get_post_thumbnail_id( $post->ID );

    $thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'twentyseventeen-featured-image\' );

    // Calculate aspect ratio: h / w * 100%.
    $ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;
    ?>

    <div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
        <div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>

    </div><!-- .panel-image -->

<?php endif; ?>

<div class="panel-content">
    <div class="wrap">

        <div class="entry-content">
            <?php
                /* translators: %s: Name of current post */
                the_content( sprintf(
                    __( \'Continue reading<span class="screen-reader-text"> "%s"</span>\', \'twentyseventeen\' ),
                    get_the_title()
                ) );
            ?>
        </div><!-- .entry-content -->

    </div><!-- .wrap -->
</div><!-- .panel-content -->

</article><!-- #post-## -->

下面是我的附加代码。我现在想做的是拉3篇最近的帖子，帖子标题放在帖子的特色图片上。我还没有完成CSS，在我可以调用这3篇文章到页面后，我将自己完成这项工作。

<div class="row featured-posts-box">
  <ul class="top-featured-image">
<?php
    $recentPosts = new WP_Query(array(\'posts_per_page\'=>\'3\',));
    while($recentPosts->have_posts()): $query->the_post(); 
?>
<li class="post-thumbnail">
        <span><a href="<?php the_permalink(); ?>">
            <?php the_title(); ?><?php the_post_thumbnail( \'twentyseventeen-featured-image\' ); ?>
        </a></span>
    </li><!-- .post-thumbnail -->
<?php
endwhile;
?>
</ul>

上面的代码不断破坏我的网站。我想是while 循环，但我不确定。

我不想使用插件。实际上，我想学习如何开发wordpress主题。

<div class="parent">
  <div class="image"><img src=""/></div>
  <div class = "overlay"> Add you title here </div>
</div>