php - 在 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的高度设置为图片的高度。