php - 使用 PHP 在 CSS 背景属性中插入特色图像以支持媒体查询

Question

我有这段代码可以专门调整每个帖子中图像的大小。我把它放在我的 Wordpress functions.php 中

//TYPEONE images for large screens

add_theme_support('TypeOne');
set_post_thumbnail_size( 1200, 600, true );
add_image_size( 'TypeOne', 1200, 600, true );



//TYPETWO images for medium screen

add_theme_support('TypeTwo');
set_post_thumbnail_size( 800, 350, true );
add_image_size( 'TypeTwo', 800, 350, true );



//TYPETHREE images for small screen

add_theme_support('TypeThree');
set_post_thumbnail_size( 420, 350, true );
add_image_size( 'TypeThree', 420, 350, true );

现在我的问题是我希望将这些图像用作背景图像。我有以下代码:

<?php global $post; ?>
<?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) false, '' );
?>
<div style="background: url(<?php echo $src[0]; ?> ) !important;">text </div>

不幸的是，这种方法完全忽略了我为图像大小设置的代码(在我的 function.php 文件中找到)。

这是我要实现的目标:

**HTML**
<div class="image-container">

</div>


@media screen and (max-width: 1100px) {
    .image-container{
        background: url(INSERT THE URL OF THE **TYPEONE** IMAGE)
    }
}

@media screen and (max-width: 700px) {
    .image-container{
        background: url(INSERT THE URL OF THE **TYPETWO** IMAGE)
    }
}

@media screen and (max-width: 400px) {
    .image-container{
        background: url(INSERT THE URL OF THE **TYPETHREE** IMAGE)
    }
}

好吧，我唯一的问题是如何在 css 中调用我喜欢的缩略图？

如果我使用这个CSS代码，

background:url('<?php the_post_thumbnail('TypeTwo'); ?>');

这真的不行..

有人可以在这里分享他/她的知识吗？谢谢!

Answer 1

使用以下代码注册图像尺寸。将它放在 functions.php 中。

<?php
add_action( 'after_setup_theme', 'child_setup' );

function child_setup(){

  // Register image sizes
  add_image_size( 'TypeOne', 1200, 600, true );
  add_image_size( 'TypeTwo', 800, 350, true );
  add_image_size( 'TypeThree', 420, 350, true );

}

要查找图像详细信息，您可以使用以下代码段。

<?php
global $post;
$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
$type_one_image_details = wp_get_attachment_image_src( $post_thumbnail_id, 'TypeOne' );
$type_two_image_details = wp_get_attachment_image_src( $post_thumbnail_id, 'TypeTwo' );
$type_three_image_details = wp_get_attachment_image_src( $post_thumbnail_id, 'TypeThree' );
$type_one_image_url = $type_one_image_details[0];
$type_two_image_url = $type_two_image_details[0];
$type_three_image_url = $type_three_image_details[0];

您现在有各自的图像 URL。根据需要在 CSS 中使用它。