从动态生成的值创建样式表有两种可能的选择。第一个选项是Inline stylesheet, 具体如下：

<div id="hero" 
  style="background-image: url(<?php // TODO retrieve image here. ?>); ">
</div>

<div id="hero"></div>

<style>
    #hero {
       background-image: url(\'<?php // TODO retrieve image here. ?>\');
       background-position: 50% 50%;
       background-size: cover;
    }
</style>

显然，由于您希望每个页面都有不同的背景图像，因此不能在静态文件中包含css。您必须动态生成它。

最简单的方法是在<style> 模板文件中的标记。其他答案向您展示了如何做到这一点。

最“WordPress”的方式会有所不同，即在您的functions.php 文件为虚拟样式表，使用wp_add_inline_style. 从本质上讲，这意味着您正在将一些语句添加到已经存在的css文件中。您的样式最终会出现在页面的头部，即它所属的位置，而不是正文（正文有效，但语义不正确）。

因此，在函数文件中，例如：

add_action (\'wp_enqueue_style\',\'wpse271934_add_styles\');
function wpse271934_add_styles () {
  global $post;
  $extra_styling = \'\';
  if (is_page() || is_single ()) {
    $image = get_the_post_thumbnail ($post->ID,\'large\');
    if (!empty($image))
      $extra_styling = \'.post, .page {background:url(\' . $image . \');}\';
    }
  // assuming style.css has the handle \'main_style\' in your theme
  wp_add_inline_style (\'main_style\', $extra_styling);
  }

Here is an example of in-page styling. :)

<?php get_header();          


     <div id="primary" class="content-area">
       <main id="main" class="site-main" role="main">

          <?php
          // Start the loop.
          while ( have_posts() ) : the_post();

           if ( has_post_thumbnail( $_post->ID ) ) { ?>

           <style>
            .featureimg{
            /* dynamic img url */
            background: url(<?= get_the_post_thumbnail( $_post->ID,\'large\' );?>);

            /* full width */
            width:100%;

            /* half height */
            height: 50%; 

            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            }
          </style>

              <div class="featureimg"></div>
              <div class="title"><?php the_title();?></div>
              <div class="content"><?php the_content();?></div>


            <?php           
            // If comments are open or we have at least one comment, load up the comment template.
              if ( comments_open() || get_comments_number() ) :
                comments_template();
              endif;

            // End the loop.
            endwhile;
            ?>

         </main><!-- .site-main -->
       </div><!-- .content-area -->

    <?php get_footer(); ?>