调整大小时背景图像消失答案

【问题标题】：Background image disappearing on resize调整大小时背景图像消失
【发布时间】：2018-04-17 04:36:35
【问题描述】：

这可能是一个简单的，但我不能锻炼 - 谁能告诉我为什么我的背景图片在这里消失在 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% 时背景图像会消失...

【问题讨论】：

标签： css wordpress media-queries custom-post-type

【解决方案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>

【讨论】：

啊，谢谢-我想首先要检查的是元素本身在发生变化后！非常感谢，我已经确定了 display:block;有椭圆尺寸吗？
是的，这很奇怪。我会犯同样的错误。

【解决方案2】：

这是因为这些块中的一些 css 驻留在 @media (min-width:860px){} 中，因此您需要将其放在 css 中并根据您的调整

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

【讨论】：