Question

我遇到了在图像上叠加了Box Shadow inset的问题，下面的代码片段按预期工作，但是，在我的页面上，阴影只是隐藏了图像。以下是我的问题的屏幕截图：Shadow Overlaying image

我知道图像正好位于它下方，因为当我调整不透明度时，它会显示出来。我对此感到茫然，任何帮助都将不胜感激。感谢。

代码:(适用于jsfiddle，但不适用于我的网站 - 请参阅上面的图片链接）：

.project-img-responsive {
    position: relative;
    z-index: -1;
    height: auto;
}

.shadow {
    box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
    border-radius: 50%;
}

.column{
 max-width:150px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="column">
<div class="shadow">
<img src=" http://placehold.it/150x150" alt="blog" class="project-img-responsive img-circle">
</div>
</div>

Answer 1

我不确定使用box-shadow放置的值的顺序是否重要，但我总是以inset开始，然后插入的像素然后是颜色。尝试颠倒你的订单也许它可能有效。希望有所帮助。

CSS Box Shadow Inset隐藏图像而不是按预期工作

1 个答案: