首页 > 解决方案 > 为什么我的背景位置有一点空间

问题描述

首先请看图片知道有什么不同

示例图片

我的 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>

它的移动版,我有一些问题,为什么我有这样的空间在我看来,我调用折扣价格的功能,空间在实际价格和折扣王子之间

标签: phpcss

解决方案


请尝试使用background-size: cover-

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

推荐阅读