调整大小时背景图像消失

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>

我一辈子都弄不明白为什么当背景图像低于 860px 并且框的宽度变为 100% 时背景图像会消失...

Answer 1

标签上设置了背景图片的图片如果没有设置为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>

Answer 2

这是因为这些块中的一些 css 位于 @media (min-width:860px){} 中，所以您需要将其放在 css 中并根据您的

 @media (max-width:859px){
a.one-half {
    float: left;
    width: 48%;
    padding: 10px;
    margin: 1%;
}
}

调整大小时背景图像消失

Background image disappearing on resize

css

wordpress

custom-post-type

media-queries