Question

这可能是一个简单的但我无法锻炼 - 有人可以告诉我为什么我的背景图像在860px宽以下消失了吗？

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，则在标签上使用background-image设置的图像将消失。因此，可能在您的媒体查询中的某处，此标记设置不正确

显示

<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%;
}
}

背景图像在调整大小时消失

2 个答案: