通过CSS加载特色图像？

Question

我的博客当前的英雄形象(粘性帖子)是静态的，因为图像是通过CSS加载的。因此，无论哪一篇文章我写得很粘，文本都是动态的。虽然我希望我的形象是动态的，并想知道最好的方法，使特征图像加载到英雄帖子动态，与正确的风格。

我该怎么处理这个？

    <div class="hero">

                <div class="hero-wrapper">

                    <div class="article-info">

                    <!-- fetch sticky and store in $sticky variable -->
                    <?php $sticky = get_option( 'sticky_posts' ); ?>

                    <!-- create a new query and store first value of the sticky -->
                    <?php $query = new WP_Query( array( 'p' => $sticky[0] ) ); ?>

                   <?php if ( $query->have_posts() ): ?>
                      <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                         <p class="topic"><a href="<?php the_permalink(); ?>"><?php the_category('&nbsp'); ?></a></p> 
                         <h1 class="hero-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

                  <?php endwhile; ?>

                  <?php wp_reset_postdata(); ?> 

                  <?php else : ?>
                   <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
                  <?php endif; ?>

                    </div>

                </div>

         </div>

scss

.hero{
  margin: 0 0 30px 0;
  background-image: url("https://placeimg.com/470/310/people");
  background-repeat: none;
  background-size: cover;
  background-position: center center; 
  @include fill-parent;
  position: relative;
  z-index: 0;
}

Answer 1

您可以使用.hero的内联样式来完成此操作。

<!-- fetch sticky and store in $sticky variable -->
<?php $sticky = get_option( 'sticky_posts' ); ?>
<!-- create a new query and store first value of the sticky -->            
<?php $query = new WP_Query( array( 'p' => $sticky[0]   ) ); ?>
<?php if ( $query->have_posts() ): ?>
  <?php while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="hero" style="background-image: url(<?php echo $path_to_img; ?>)">
      <div class="hero-wrapper">
        <div class="article-info">
          <p class="topic">
            <a href="<?php the_permalink(); ?>">
              <?php the_category('&nbsp'); ?>
            </a>
          </p>
          <h1 class="hero-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
        </div>
      </div>
    </div>
    <?php endwhile; ?>
      <?php wp_reset_postdata(); ?>
        <?php else : ?>
          <p>
            <?php _e( 'Sorry, no posts matched your criteria.' ); ?>
          </p>
          <?php endif; ?>

和scss

.hero{
   margin: 0 0 30px 0;
   background-repeat: none;
   background-size: cover;
   background-position: center center; 
   @include fill-parent;
   position: relative;
   z-index: 0;
 }