在HTML中添加图片阴影,CSS-为什么无法在图像上插入框阴影？

CSS-为什么无法在图像上插入框阴影？

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

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

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;

}

有没有办法使嵌入框阴影重叠图像？

现场演示

FalconC asked 2020-07-25T11:21:26Z

8个解决方案

47 votes

因为阴影是父容器的一部分，所以它在图像下方渲染。 一种替代方法是让div像这样在图像上方放置阴影：

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://JS fiddle.net/WY MF E/3/]

RyanS answered 2020-07-25T11:21:55Z

40 votes

只是为了说明这一点，因为我只是在创建类似的东西...

我讨厌为了样式而用额外的元素来污染我的标记，因此CSS解决方案是使用：after伪元素：

main::after

{

box-shadow: inset 3px 3px 10px 0 #000000;

content: '';

display: block;

height: 100%;

position: absolute;

top: 0;

width: 100%;

}

对于您想做的事情来说可能为时已晚，但是根据我的估计，这是更好的解决方案。

Rillus answered 2020-07-25T11:22:24Z

7 votes

它不重叠的原因是因为图像位于div内，因此图像位于其顶部。 图像比div高(更接近用户)。

您可以更改图像以使用position: relative; z-index: -1，并让包含div的边框代替在主体上设置背景色。 您需要使用box-sizing: border-box在div的宽度中包括边框。

演示

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;

}

brouxhaha answered 2020-07-25T11:22:53Z

4 votes

对于那些使用绝对位置的全尺寸：before /：after伪元素的用户，请考虑在伪元素上使用pointer-events: none，以便原始元素保持可单击状态。

bencergazda answered 2020-07-25T11:23:13Z

2 votes

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

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

jsFiddle示例

j08691 answered 2020-07-25T11:23:37Z

1 votes

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

例如，假设您的标头的高度为50px。 您可以从顶部(或阴影的高度)开始#content div ID 53.45px，然后阴影就会出现在图像上方。

这样做的一个问题是，如果您使用的是相当透明的阴影，则透明度越高，通过实现此CSS可能看起来越发粘。

在实践中，代码如下：

HTML：

Whatever's in your header