Question

所以我想在hero-wrapper div中使用css显示背景图片（即wordpress帖子中的缩略图），如果屏幕尺寸为min。 900px。

我使用php检查是否有缩略图，然后使用javascript检查屏幕宽度，然后在潜水中添加background-image属性。不工作，我觉得我的逻辑错了？

HTML

    <?php
        if ( has_post_thumbnail() ) { ?>
            <?php    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

            <script type="text/javascript">
                if (jQuery(window).width() == 900) {
                 <?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
                }
            </script>   
    <?php } ?>  
    <section class="hero-wrapper">

        <figure class="frontpage-hero">
            <div class="banner-box">
                <h2>GET YOUR FREE CASE ASSESSMENT?</h2>
                <h6>Enter your details below for a consultation</h6>
                <form>
                    <input type="text" name="name" placeholder="Name..">
                    <input type="text" name="email" placeholder="Email..">
                    <input type="submit" name="submit">
                </form>     
            </div>           
        </figure>

    </section>

CSS

.hero-wrapper {
    margin: 0;
    padding: 0;
    min-height: 669px;
    background-repeat: no-repeat;
}
@media screen (min-width: 900px) {
    .hero-wrapper {
        min-height: 669px;
        background-repeat: no-repeat;
    }
}

Answer 1

您正在回复<section>标记内的<script>标记。你应该改变这个

<script type="text/javascript">
            if (jQuery(window).width() == 900) {
             <?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
            }
        </script>

这样的事情

<script type="text/javascript">
            if (jQuery(window).width() >= 900) {
             $('.hero-wrapper').css('background-image', 'url(' + <?php echo $thumb['0']; ?> + ')');
            }
        </script>

Answer 2

你的假设错了两次：

您的jQuery(window).width() == 900条件只会运行一次，并且不会反映窗口大小的变化
你正在尝试使用php（服务器端语言）在javascript（客户端代码）代码块中输出html（客户端标记）。最终会出现语法错误。

正确的方法是输出你的html元素并使用CSS media queries来控制它的外观。类似的东西：

.hero-wrapper {
  display: none;
}
@media (min-width: 900px) {
  .hero-wrapper {
    display: block;
  }
}

另请注意，显示为背景的图像不会强制元素具有任何高度，因此您的元素将显示为0px高度（换句话说，不可见）。您需要以某种方式指定元素的尺寸（并记住图像可能具有不同的宽高比）。

毕竟，您可能更容易不使用背景图像，而是插入普通图像，并使用CSS控制其尺寸。

Answer 3

你没有向现有的＆＃34;英雄包装者添加任何东西＆＃34;使用您的代码div，您只是在Javascript块中回显一些HTML，而这些HTML无法实现任何目标。您几乎肯定在控制台中遇到语法错误。最终呈现的页面将如下所示：

<script type="text/javascript">
    if (jQuery(window).width() == 900) {
        <section class="hero-wrapper" style="background-image: url('thumbnail.png') >
    }
</script>   
<section class="hero-wrapper">
    <figure class="frontpage-hero">

...等

这将使您获得JS控制台错误：

未捕获的SyntaxError：意外的标记＆lt;

即使该部分有效，HTML也无效，因为您永远不会使用＆＃34;关闭style属性，并且此代码只会在窗口宽度完全 900px时执行，我不认为你想要的。

您需要做的是更改现有div以添加样式，并在宽度大于或等于900px时允许它。这应该这样做：

<script type="text/javascript">
$(document).ready(function() {
    if ($(window).width() >= 900) {
      $(".hero-wrapper").css("background-image", "url('<?php echo $thumb['0']; ?>')");
    }
});
</script>

我还将代码包装在document.ready中，以便在页面准备就绪之前不会运行。

Answer 4

我会删除javascript并使用display：none在CSS媒体查询中执行此操作;隐藏900px以下的屏幕元素，即

HTML / PHP

<?php
if ( has_post_thumbnail() ) { 
$thumb = wp_get_attachment_image_src( 
get_post_thumbnail_id($post->ID), 'full' );
echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; 
} ?>

在你的CSS中

@media screen (min-width: 900px) {
    .hero-wrapper {
        min-height: 669px;
        background-repeat: no-repeat;
        display: block;
    }
}

@media screen (max-width: 900px) {
    .hero-wrapper {
        display: none;
    }
}

使用Javascript / Php：尝试显示背景图像 - 逻辑错误？

4 个答案: