css - 调整大小时背景图像消失

Question

这可能很简单，但我无法锻炼 - 谁能告诉我为什么我的背景图像在这里消失在 860 像素以下？

http://staging.seedcreativeacademy.co.uk/qualifications/

我已经检查了我正在使用的所有响应式媒体查询，但我可以找到一个可以去除背景图像的媒体查询。

这是用来拉动这些盒子的代码:

<!-- Main Content =========================================== -->

<div class="wrap">
      <?php
        $args = array( 
          'post_type' => 'qualifications',
          'orderby' => 'title',
          'order' => 'ASC'
        );
        $the_query = new WP_Query( $args );

      ?>

      <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <a class="one-half qualifications-block" href="<?php the_permalink(); ?>" style="background-image:url(<?php the_field('qualification_thumb'); ?>); background-size: 150%">

              <h2><?php the_title();?></h2>

        </a>

      <?php $products_count = $the_query->current_post + 1; ?>
      <?php if ( $products_count % 2 == 0): ?>

        <!-- Enter something here to appear after 2 items - New row div would be: </div><div class="row"> -->

      <?php endif; ?>


      <?php endwhile; wp_reset_postdata(); endif; ?>
</div>

我终其一生都无法找出为什么当背景图像低于 860 像素并且框的宽度变为 100% 时背景图像会消失...

Answer 1

标签上设置了 background-image 的图片如果没有设置为 display: block 就会消失。所以也许在你的媒体查询中这个标签设置不正确

出现

<a class="one-half qualifications-block" style="background-image: 
url('https://www.w3schools.com/css/trolltunga.jpg'); display: block"
</a>

消失了

<a class="one-half qualifications-block" style="background-image: 
url('https://www.w3schools.com/css/trolltunga.jpg');"
</a>