如何在灰色背景颜色的div上显示部分产品图像?

Question

我正在尝试设计产品细节，其中一个要求是像这样设计产品形象 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>

我尝试使用这样的css：postion :relativez-index....等 但没能做到。

Answer 1

不需要额外的标记，您可以使用pseudo元素：

.image-wrap {
margin: 100px;
box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.3);
max-width: 200px;
position: relative;
}
.image-wrap:before {
content: '';
display: block;
position: absolute;
top: -10%;
left: -10%;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: -1;
}
img {
display: block;
width: 100%;
height: auto;
}

<div class="image-wrap">
<img src="https://via.placeholder.com/200">
</div>

并且对:before的top和left值使用百分比，如果由于响应式 CSS 而变小或变大，背景框始终相对于图像的大小保持

。

Answer 2

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

.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>