Question

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

The problem

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

<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;
}

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

Live demo

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

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

Answer 5

您可以将图像设置为div的背景：

background-image:url(http://www.placehold.it/500x500)

<强> jsFiddle example

Answer 6

如果你聪明的小数，一个简单的解决方法是将你的内容存储在一个单独的div中，然后从中选择并从顶部实现一定数量的像素。

例如，假设您的标题高度为50px。你可以从顶部开始你的#content div id 53.45px（或你的投影的任何高度）然后你的阴影会出现在图像上方。

这个问题的一个问题是，如果你使用一个相当透明的阴影，那么通过实现这个css，它看起来越粘，它就会变得越透明。

实际上，代码如下：

HTML：

  <header>
Whatever's in your header
</header>

<div id="content>
Page content
</div>

CSS：

header {
    height: 50px;
    box-shadow: 0 5px 5px rgba(0,0,0,1);
}

#content {
    top: 55px;
}

Answer 7

正如Rilus所说，我们可以使用伪类。不幸的是，由于某些原因，这似乎不适用于img标签，但我们可以使用内部和外部容器的组合来实现我们所需的效果。

id<GPPShareBuilder> shareBuilder = [[GPPShare sharedInstance] shareDialog];

http://jsbin.com/kabiwidego/1/

不确定ie 10虽然因为它似乎处理的伪类与大多数浏览器的位置略有不同。

Answer 8

https://stackoverflow.com/a/21415060/6235358 这是一种很好的方法，但是我们可以使用::after伪类以更好的方式进行操作，因此您不必在HTML中添加空的<div>

Answer 9

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

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

9 个答案: