Php 添加_post_缩略图（）；通过css

我正在尝试设置我的帖子页面，以便每个帖子项目都以其特色图片作为背景加载。我的代码工作正常，但如何添加文章缩略图作为每篇文章的背景？我的代码附在下面

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Clean Blog
 */

get_header(); ?>

            <?php
    // Custom loop that adds a clearing class to the first item in each row
    $args = array('numberposts' => -1, 'order' => 'ASC' ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project


     $allposts = get_posts($args);
        $numCol = 2; // Set number of columns

        // Start Counter
        $counter = 0;
        foreach ($allposts as $post) {
            $content = '<div class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
            $content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a></h3>';
            $content .= $post->post_content;
            $content .= '</div>';
            echo $content;
            $counter ++;
        }
    ?>



    <style type="text/css">
        /* Added styles here for the demo, but ideally you would put this in a stylesheet.*/
        .columns-2 {
            float:left;
        }
        .first {
            clear:both;
            margin-left:0;
        }
    </style>
                <!-- /.col-lg-8.col-lg-offset-2.col-md-10.col-md-offset-1 -->

    <?php get_footer(); ?>

/*在这里为演示添加了样式，但理想情况下，您可以将其放在样式表中*/
.第2栏{
浮动：左；
}
.首先{
明确：两者皆有；
左边距：0；
}

更新 我现在尝试将其添加为内联样式，但页面上显示了原始样式。我觉得我错过了一些简单的事情

更新2 我已经检查了引号，但是现在我得到了一个解析错误，页面根本没有加载

$content = '<div style="background: url('${thumbnail}') center center/cover no-repeat;" class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column

$content=''；//将类添加到第一列

$content=''；//将类添加到第一列

---

您可以尝试这样做，在css中可以添加规则以正确查看背景。

您可以将其添加为内联样式：

<?php

    $thumbnail = get_the_post_thumbnail( $page->ID, 'thumbnail' );

    $content = "<div class='your-post-thing' style='background: url('${thumbnail}') center center/cover no-repeat;'>...stuff...</div>';

    echo $content;
?>

---

Thx的评论，但现在的原始风格显示出来。知道为什么吗？我已经更新了问题^@user3236637检查您的报价。使用“”和“”表示内部。这是因为要计算字符串，需要在外部使用双引号（“）。在这种情况下，最好使用

进行串联，而不是直接将变量作为

${缩略图}

插入

$content = '<div style="background-image:url('.wp_get_attachment_url(get_the_post_thumbnail()).')" class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column

<?php

    $thumbnail = get_the_post_thumbnail( $page->ID, 'thumbnail' );

    $content = "<div class='your-post-thing' style='background: url('${thumbnail}') center center/cover no-repeat;'>...stuff...</div>';

    echo $content;
?>

<?php
    $content .= "<div class='your-post-thing'>";
        $content .= "<img class='background-image' src='${thumbnail}' />";
    $content .= "</div>";

    echo $content;
?>

.your-post-thing {
    position: relative;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}