為什麼插入框陰影在透明背景的影像上消失？

了解圖像上的插入框陰影問題

在網頁設計中，使用插入框陰影在元素內創建深度和尺寸是一種常見技術。然而，在處理包含圖像的容器時，事情並不總是那麼簡單。當嵌入框陰影似乎在嵌入影像上消失時，就會出現問題。

隱形陰影的情況

考慮原始問題中提供的範例：

<code class="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;
}

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

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

雖然目標是在容器（包括影像）周圍套用嵌入框陰影，但它無法顯示。為什麼會出現這種情況？

影像透明度問題

影像缺少陰影的原因在於透明度。當影像具有透明背景時，它本質上是背景元素的視窗。在這種情況下，容器的背景是黑色的。結果，嵌入的陰影在影像的透明區域變得不可見。

克服透明障礙

要解決此問題，可以使用一個簡單而優雅的解決方案：使用 CSS : 在偽元素之後。透過在容器中新增 :after 偽元素，我們可以建立一個位於影像頂部的額外圖層並接收插入框陰影。

在下面更新的CSS 片段中，我們應用:after 偽元素

元素容器：

<code class="css">main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}</code>

透過此修改，插圖框陰影現在出現在圖像的不透明和透明在區域上，從而提供所需的陰影效果。

以上是為什麼插入框陰影在透明背景的影像上消失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！