在wordpress主题中将the_post_thumbnail添加为CSS背景

Question

我正在尝试将我的特色图像设置为CSS中的背景图像。

我需要在HTML和CSS中的两个位置显示相同的特色图像。

你如何在CSS中使用the_post_thumbnail()？

HTML

 <div class="magnify">
    <div class="large"></div>
    <img class="small" <?php the_post_thumbnail( 'large', array
    ('class' =>'img-      responsive') ); ?> />
 </div>

CSS

.large {background: url('img/image.jpg') no-repeat;}

Answer 1

正如Tim Malone在评论中所说，你需要使用内联样式。你可以这样做：

<?php
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');
list($url, $width, $height, $is_intermediate) = $thumbnail;
?>

<div class="large" style="height:<?php echo $height; ?>px;background-image:url(<?php echo $url; ?>);background-repeat:no-repeat;"></div>

请注意，我正在使用wp_get_attachment_image_src，以便在需要时可以获取图像尺寸。在这种情况下，将div的高度设置为图像的高度。