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

Question

我有这个代码来专门调整每个帖子中的图像大小。我把它放在我的Wordpress函数中.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>

不幸的是，这种方法完全忽略了我为图像大小设置的代码（在我的函数.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 中使用它。