0

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

我需要能够引用站点 url 以便首先设置背景图像，所以最初我使用 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 中引用站点 URL，以便即时更改背景图像

4

3 回答 3

0

你试过去掉前面的斜线吗

<style>
  @media (max-width: 420px){
    .home-background {
      background-image: url('images/home_page/bg-mobile.jpg');
    }
  }
</style>
于 2013-09-08T15:48:23.010 回答
0

您可以使用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 }
}

希望能帮助到你！

于 2013-09-08T16:00:41.983 回答
0

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

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

如果不添加!important

于 2013-09-08T16:42:53.490 回答