时间戳

首页 > 解决方案 > 如何在灰色背景色的 div 上显示部分产品图像？

html - 如何在灰色背景色的 div 上显示部分产品图像？

问题描述

我正在尝试设计产品细节，其中一项要求是设计像这样的产品形象 https://imgur.com/Q8psgf7 

<div class="button-wrap divide-md">
     <div class="row">
         <div class="col-sm-12 col-xs-12">
             <a href="{{ route('products')  }}" class="productCategories radio-label" id="city1-button">
                 <label class="button-label @if($productCat == 0) chosen_productCategory @endif" for="product1-button">
                     <h1>{{ trans("public.allProducts")  }}</h1>
                  </label>
              </a>
          </div>
      </div>
      @foreach ($products_cats as $product_cat)
          <div class="row">
              <div class="col-sm-12 col-xs-12">
                  <a href="{{ route('products_cat', $product_cat->id) }}" class="productCategories radio-label" id="city1-button">
                       <label class="button-label @if($productCat == $product_cat->id) chosen_productCategory @endif" for="product1-button">
                            <h1>{{ $product_cat->name }}</h1>
                       </label>
                   </a>
               </div>
           </div>
       @endforeach
 </div>

我尝试使用csslike : postion :relative z-index....etc 但无法成功。

标签： htmlcsslaravel-blade

解决方案

从附加的图像看来，您需要类似以下的内容。

.parent {
  position: relative;
  margin: 50px auto;
}

.parent div {
  width: 100px;
  height: 100px;
  border: 1px solid #e1e1e1;
}

div.first {
  background: grey;
}

div.second {
  background-color: red;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  box-shadow: 0 4px 16px #333333;
}
<div class="parent">
  <div class='first'/>
  <div class="second"/>
</div>

推荐阅读