在图像之前的css内部阴影

Question

如何使用内阴影制作图像？当我放置图像时，内部阴影被阻挡。知道如何在图像

之前显示内部阴影

.img_container{
	height:150px;
	width:200px;
	cursor:pointer;
	background:#fff;
	position:relative;
	-moz-box-shadow:    inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow:         inset 0 0 10px #000000;	
	
}

.img_container img{
	position:absolute;
	height:150px;
	width:200px;
	
}

<div class="img_container">
  <div class="boximgobj">
    <img src="http://minionslovebananas.com/images/gallery/preview/Chiquita-DM2-gallery_minion_cupcake.jpg?w=373&h=400" />
  </div>
</div> 
<div class="img_container">
  <div class="boximgobj">
    <img src="" />
  </div>
</div> 

Answer 1

不确定是否有更好的解决方案，但它可以通过z-index和background: transparent来实现

.img_container{
	height:150px;
	width:200px;
	cursor:pointer;
	background:#fff;
	position:relative;
	-moz-box-shadow:    inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow:         inset 0 0 10px #000000;	
	background: transparent;
}

.img_container img{
	position:absolute;
	height:150px;
	width:200px;
	z-index:-1;
}

<div class="img_container">
  <div class="boximgobj">
    <img src="http://minionslovebananas.com/images/gallery/preview/Chiquita-DM2-gallery_minion_cupcake.jpg?w=373&h=400" />
  </div>
</div> 
<div class="img_container">
  <div class="boximgobj">
    <img src="" />
  </div>
</div> 

Answer 2

您需要添加填充。问题是图像在阴影上。

.img_container{
	height:170px;
	width:220px;
	cursor:pointer;
	background:#fff;
	position:relative;
	-moz-box-shadow:    inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow:         inset 0 0 10px #000000;	
	
}

.img_container img{
	position:absolute;
	height:150px;
	width:200px;
	padding: 10px;
}

<div class="img_container">
  <div class="boximgobj">
    <img src="http://minionslovebananas.com/images/gallery/preview/Chiquita-DM2-gallery_minion_cupcake.jpg?w=373&h=400" />
  </div>
</div>