为什么我的背景位置有一点空间

Question

首先请看图片以了解有什么不同

Sample picture

我的CSS和html是这样的：

@media screen and (max-width: 360px) {
  .bg-product {
    background-image: url(../../assets/img/home/mobile/3.png);
    position: absolute;
  }
}

<div class="col-12 px-0">
  <a href="<?php echo site_url($link_product)  . $link ?>" class="link-default">
    <h2 class="h5 product-background">
      <?php echo $value->item_name; ?>
    </h2>
    <p class="my-0 product-background">
      <?php
    				if ($value->item_discount != 0 ) {
    	?>
        <strike class="text-discount product-background"><?php echo currency_display($value->$price); ?></strike>
        <?php
    					if($value->item_discount >= 10)	{
    		?>
          <span class="text-nowrap product-background"><?php echo $value->item_discount . '% Off' ?></span>
          <?php
    						}
    			?>
            <?php
    				     }
    			?>
    </p>
    <p class="price-product bg-product">
      <?php
    				if ($value->item_discount != 0 ) {
    				    echo currency_display($value->$price - ($value->$price * ($value->item_discount/100)));
    				}else {
    				    echo currency_display($value->$price);
    				}
    	?>
    </p>
  </a>
</div>

适用于移动版本，我有一个问题，为什么我有这样的空间，在这里我调用折扣价格函数，实际价格和折扣王子之间就出现了空间

Answer 1

请尝试使用background-size: cover-

.bg-product {
    background-image: url(../../assets/img/home/mobile/3.png);
    position: absolute;
    background-size: cover;
}