为什么 inset box-shadow 不适用于图像？答案

【问题标题】：Why doesn't inset box-shadow work over images?为什么 inset box-shadow 不适用于图像？
【发布时间】：2022-03-02 23:13:07
【问题描述】：

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

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

<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

【问题讨论】：

另见：stackoverflow.com/questions/8771178/…

标签： css

【解决方案1】：

只是插话，因为我只是在创造类似的东西......

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

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

对于您尝试做的事情来说可能为时已晚，但在我看来这是更好的解决方案。

【讨论】：

这是迄今为止最好的答案
@SBO，你应该使用 包装元素 用于带有自结束标签的元素，例如<img/>、<input/>。例如，将图像元素放在div 元素中，并将.after 阴影样式赋予div，您会发现它与需要额外div 的@RyanS 答案不同，效果很好。
这是一个很好的答案，但它确实涵盖了主要元素，使得文本选择变得不可能。一个小弱点是使height 与阴影大小相同（上例中为10px）并将top: 0 替换为bottom: 0。
那么你肯定会错过左/右阴影吗？如果有问题，pointer-events: none; 将允许内容可点击。

【解决方案2】：

因为阴影是它呈现在图像下方的父容器的一部分。一种替代方法是使用 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;
}

编辑：我已经更新了 fiddle 以在阴影和 img 上包含边框半径，从而解决了 cmets 中发现的问题。

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

【讨论】：

虽然解决方案在这种特殊情况下效果很好，但它并不理想，因为它不适用于圆角。如果应用此解决方案，<main> 也无法滚动。
你能举一个这些问题的例子吗？
您可以将real shadow 与artificial shadow 进行比较。
@FalconC 好吧，您肯定遇到了挑战……哈哈。你可以在阴影区域添加填充以防止它覆盖东西吗？或者是想要的..
我刚刚从容器中移除了盒子阴影。它有太多的错误需要修复。 '
' 和 '' 出现在阴影上方。它现在在容器上不能很好地工作。

【解决方案3】：

它不重叠的原因是因为图像在 div 内，所以图像在它的顶部。图片比 div 更高（更接近用户）。

您可以将图像更改为使用position: relative; z-index: -1，并让包含的 div 使用边框，而不是在 body 上设置背景颜色。您需要使用 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;
}

【讨论】：

这是一个不错的技巧，尽管在具有背景的深度嵌套上下文中，您可能还需要将 main 的 parent 设置为堆叠上下文以避免隐藏 @ 987654327@（在这种情况下）。此外，当main 溢出滚动时，Chrome 似乎有一些渲染错误，-webkit-transform: translatez(0); 在img 上解决了这个问题（！）
@natevw 好点。更多详情见this answer

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

jsFiddle example

【讨论】：

如问题所述，容器将包含文本和图像，而不仅仅是一张图像。

【解决方案6】：

https://stackoverflow.com/a/21415060/6235358 这是一个很好的方法，但我们可以使用 ::after 伪类以更好的方式做到这一点，这样您就不必在 HTML 中添加空的 <div>

【讨论】：

我看不到让img::after 向图像添加任何内容。您可以在答案中添加代码 sn-p 吗？

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

例如，假设您的页眉高度为 50 像素。您可以从顶部开始您的#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;
}

【讨论】：

【解决方案9】：

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

.outer:hover .inner:after {
position: absolute;
content: '';
color: white;
display:block;
bottom: -0px;
right: -0px;
width: 100%;
height: 100%;
z-index: 11;
border: solid 10px red;
}

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

不确定 ie 10，因为它似乎可以处理与大多数浏览器完全不同的伪类。

【讨论】：

:before 和:after 内容不起作用的原因是<img> 元素不能包含子元素。 :before 和 :after 生成一个行为类似于子元素的“伪元素” - 因此，任何不能包含子元素的元素（输入是另一个常见示例），都不能使用生成的内容。

【解决方案10】：

即使我参加聚会迟到了，这些天我也遇到了同样的问题，并且正在寻找解决方案。对我来说，最好的解决方案（移动设备友好）是这个：

JSFiddle：

.image-inset-container {
  margin-bottom: 30px;
}

.image-inset-shadow {
  position: relative;
}

.image-inset-shadow img {
  border-radius: 20px;
}

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

<body>
  <h4>Reimagined Web Design</h4>
  <p>With your input and business goals in mind, we bring your brand to life through custom human-facing graphics and
    visual elements targeted toward your audience for good user experience and created in future-forward technology,
    guaranteeing a successful new web design.</p>
  <div class="image-inset-container">
    <div class="image-inset-shadow"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" alt="img1" />
      <div class="image-shadow"></div>
    </div>
  </div>
  <p>We initiate a collaborative process where your team is involved in every step to create a frictionless and
    delightful
    experience for your customers. Our designers immerse themselves in your industry and your brand aesthetic to
    deliver
    a website that represents your business while achieving your goals for a connected future.</p>
</body>

【讨论】：