为什么不在图像上插入盒子阴影？

Question

我有一个使用插入框阴影的容器.容器包含图像和文本.插入阴影显然不适用于图像:

这里的白色部分是容器.它包含一个白色图像,并且应用了插入框阴影.

<main>
    <img src="whiteimage.png">
</main>

body {
    background-color: #000000;
}

main {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 90%;
    height: 90%;
    background-color: #FFFFFF;
    box-shadow: inset 3px 3px 10px 0 #000000;
}

有没有办法让插入框阴影重叠图像？

现场演示

Answer 1

因为阴影是父容器的一部分,所以它会在图像下方呈现.另一种方法是使用div将阴影置于图像上方,如下所示:

<main>
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" />
    <div class="shadow"></div>
</main>

CSS:

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 3px 3px 10px 0 #000000;
    border-radius: 20px;
    top: 0;
    left: 0;
}

编辑:我已经更新了小提琴,在阴影和img上包含了边框半径,解决了评论中发现的问题.

https://jsfiddle.net/WymFE/3/

Answer 2

只是为了加入这个,因为我只是创造了类似的东西......

我讨厌为了样式而用额外的元素污染我的标记,所以CSS解决方案是使用:after伪元素:

main::after
{
 box-shadow: inset 3px 3px 10px 0 #000000;
 content: '';
 display: block;
 height: 100%;
 position: absolute;
 top: 0;
 width: 100%;
}

对于你想要做的事情来说可能为时已晚,但在我的估计中这是更好的解决方案.

Answer 3

它不重叠的原因是因为图像在div内,所以图像在它上面.图像比div更高(更接近用户).

您可以更改要使用的图像position: relative; z-index: -1,并使包含div使用边框而不是在主体上设置背景颜色.您需要使用box-sizing: border-box在div的宽度中包含边框.

DEMO

body {
    background-color: #FFF;
}

main {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 60px solid black;
    box-shadow: inset 3px 3px 10px 0 #000000;
    box-sizing: border-box;
}

img {
    z-index:-1;
    position: relative;
}

Answer 4

对于那些使用绝对定位、全尺寸 :before/:after 伪元素的人，请考虑在伪元素上使用pointer-events: none，以便原始元素保持可点击。

Answer 5

2020 年实现这一目标的最佳方法是在图像上使用混合混合模式。box-shadow在 the 的父元素上使用 theimg并使用mix-blend-mode: multiply.