【问题标题】:how to insert image in style element of div如何在div的样式元素中插入图像
【发布时间】:2021-07-01 22:47:20
【问题描述】:

product_stock == 0 时,我想在我的产品卡片上显示images/soldout.png。我尝试了下面的代码,但我的images/soldout.png 没有显示在我的卡上。当product_stock == 0.任何帮助将不胜感激。谢谢

这是我的代码

<div class="col-lg-3 col-md-4 col-6 form-group productidfocus" style="padding: 0 8px 0 8px;" >
    <div class="product-wrapper" id="productlist" style='<?php echo $product_stock == 0 ? "background-color:#d0d0d0;  background-image: url('images/soldout.png');" : "";  ?>'>
          <img class="product-img" loading="lazy" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
          <div class="card-body" >
            <h5 class="product-title" style="min-height: 39px; text-decoration: none; width:150px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-align: left !important;"><?php echo $row['product_title']; ?></h5>
            <p class="product-price">RM<?php echo $row['product_price']; ?>/KG</p>
               <p style="font-size: 10px; margin-top:-10px; margin-bottom:-2px;" ><span class="text-danger" > <?php echo $sum = $row['totalquantity'] ?? 0;?> SOLD </span></p>
                <p style="font-size: 10px;" ><span class="text-success"><?php echo $row['product_stock']; ?> IN STOCK </span></p>
            <a href="product.php?cid=<?php echo $row['id']; ?>" class="btn btn-block addtocart text-center" style="text-decoration: none">View More</a>
          </div>
        </div>
    </div>

【问题讨论】:

    标签: php css image styles


    【解决方案1】:

    当您的 product_stock ==0 时,您必须在 div 标签上添加类,否则不会

    You have to change path as per your requirements
    

    添加单张图片

    .card-body {
       background-image: url("https://soldout.png");
       height: 400px;
       width: 100%;
    }
    

    添加多张图片

    .card-body {
       height: 400px;
       width: 100%;
       background-image: 
           url("https://soldout.png"),
           url("https://soldout.png");
       background-repeat: no-repeat, no-repeat;
       background-position: right, left; 
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多