css внутренняя тень перед изображением

Question

Как сделать изображение с внутренней тенью? Когда я помещаю изображение, внутренняя тень заблокирована. Любая идея, как сделать внутреннюю тень шоу, прежде чем изображение

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

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

<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{ 
 
\t height:150px; 
 
\t width:200px; 
 
\t cursor:pointer; 
 
\t background:#fff; 
 
\t position:relative; 
 
\t -moz-box-shadow: inset 0 0 10px #000000; 
 
\t -webkit-box-shadow: inset 0 0 10px #000000; 
 
\t box-shadow:   inset 0 0 10px #000000; \t 
 
\t background: transparent; 
 
} 
 

 
.img_container img{ 
 
\t position:absolute; 
 
\t height:150px; 
 
\t width:200px; 
 
\t 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{ 
 
\t height:170px; 
 
\t width:220px; 
 
\t cursor:pointer; 
 
\t background:#fff; 
 
\t position:relative; 
 
\t -moz-box-shadow: inset 0 0 10px #000000; 
 
\t -webkit-box-shadow: inset 0 0 10px #000000; 
 
\t box-shadow:   inset 0 0 10px #000000; \t 
 
\t 
 
} 
 

 
.img_container img{ 
 
\t position:absolute; 
 
\t height:150px; 
 
\t width:200px; 
 
\t 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>