Question

我正在为网站做一个响应主题。当窗口大小小于420px时，我需要能够更改div的背景图像。

我需要能够引用网站网址以便首先设置背景图片，所以最初我使用了PHP标记和内联样式：

<div style="background-image: url('<?php echo bloginfo('template_url') . '/images/home.jpg'; ?>');"></div>

但是当窗口变小时我需要更改背景图像。

所有其他响应式css都在这个媒体查询中，在style.css：

中

@media (max-width: 420px){
    div {

    }
}

这是我的计划。我可以使用.php页面上的样式标签来使用相同的php片段来获取url，从而获得图像。但是，那个样式标签似乎没有任何影响......

<style>
  @media (max-width: 420px){
    .home-background {
      background-image: url('<?php echo bloginfo('template_url') . '/images/home_page/bg-mobile.jpg'; ?>');
    }
  }
</style>

或者，我可以使用javascript，但我想尝试避免这种情况，因为它对我来说似乎很笨拙......

如何在style.css中引用网站网址，以便我可以动态更改背景图片

Answer 1

您是否尝试过删除前面的斜杠

<style>
  @media (max-width: 420px){
    .home-background {
      background-image: url('images/home_page/bg-mobile.jpg');
    }
  }
</style>

Answer 2

您可以使用wp_head动作挂钩在<head>标记中回显您的样式。您应该设置规则!important，因为您需要覆盖默认值。使用此钩子可以有条件地设置您的规则是否会打印在您的标签中

在你的functions.php中

add_action( 'wp_head', 'so18685496_print_my_style' );
function so18685496_print_my_style(){
    //we are on homepage? this is an example you can strip the if statement
    if( is_home() ){ ?>
    <style>
        @media (max-width: 420px){
          .home-background {
            background-image: url("<?php echo get_stylesheet_directory_uri(); ?>/images/home_page/bg-mobile.jpg")!important;
          }
        }
    </style>

    <?php }
}

希望它有所帮助！

Answer 3

您也可以在默认的style.css中添加它。它会起作用。

@media (max-width: 420px){
.home-background {
      background-image: url('images/home_page/bg-mobile.jpg');
    }
}

如果没有添加!important

在Wordpress中，获取样式表中的站点URL

3 个答案: