CSS技巧：如何仅显示图片阴影而不显示图片本体

本文探讨了在CSS中隐藏PNG图片本体但保留其阴影效果的两种主要方法。针对图片内容形状的阴影，可利用`filter: drop-shadow`配合`opacity: 0`或`visibility: hidden`实现；而对于矩形或容器形状的阴影，则推荐使用`box-shadow`属性作用于独立的容器元素。文章详细阐述了两种方法的原理、实现代码及适用场景，帮助开发者根据需求选择最佳方案。

在网页设计中，有时我们需要为元素添加阴影效果，但又希望图片本身不可见，只留下其投影。这在创建特殊视觉效果或占位符时非常有用。CSS提供了多种阴影实现方式，但要实现“只留阴影不留图片”的效果，我们需要理解不同阴影属性的特性。

理解 filter: drop-shadow 与 box-shadow

在深入实现方法之前，首先要明确CSS中两种主要阴影属性的区别：

1. filter: drop-shadow():

   立即学习“前端免费学习笔记（深入）”；

   • 作用对象：应用于元素的内容，特别是其非透明区域（alpha通道）。这意味着如果一个PNG图片有透明背景，drop-shadow会沿着图片内容的实际轮廓生成阴影。
   • 语法：drop-shadow(offset-x offset-y blur-radius spread-radius color)。
   • 特点：阴影形状可以非常复杂，精确模拟图片内容的投影。

2. box-shadow:

   • 作用对象：应用于元素的整个盒子模型（包括其边框和内边距）。阴影的形状通常是矩形，或者通过border-radius调整为圆角矩形。
   • 语法：box-shadow(offset-x offset-y blur-radius spread-radius color inset)。
   • 特点：阴影形状相对规则，不随内容透明区域变化。

了解这些区别是选择正确实现方法的关键。

方法一：保留图片内容形状的阴影（使用 filter: drop-shadow）

如果你的目标是让阴影精确地跟随PNG图片的非透明区域轮廓，那么filter: drop-shadow是首选。要隐藏图片本体，我们可以结合使用opacity: 0或visibility: hidden。

实现原理

将filter: drop-shadow应用到图片元素本身，然后通过设置opacity: 0或visibility: hidden来使图片内容不可见。由于filter属性独立于元素的可见性，阴影将依然存在。

示例代码

假设你有一张名为 nba.png 的图片，并希望其阴影保留。

Writecream

AI作家和文案内容生成器

63

查看详情

HTML 结构：

<img src="nba.png" alt="NBA Logo" class="alpha-shadow-only">

CSS 样式：

.alpha-shadow-only {
  /* 定义阴影效果 */
  filter: drop-shadow(10px 10px 8px rgba(0, 0, 0, 0.5));

  /* 隐藏图片本体，但保留其占据的空间和阴影 */
  opacity: 0; 
  /* 或者使用 visibility: hidden; */

  /* 如果需要图片不占据任何空间，可以使用以下方式，但要注意其对布局的影响 */
  /* position: absolute; top: -9999px; left: -9999px; */
  /* 或者 transform: translate(-9999px, -9999px); */
}

注意事项：

• opacity: 0 和 visibility: hidden 都会使图片不可见，但元素仍然占据其在文档流中的空间，并可以响应事件（尽管不可见）。
• 如果你希望图片完全不占据空间，可以考虑将其定位到视口外（如 position: absolute; left: -9999px;），或者使用transform: translate()将其移动到很远的位置。但请注意，这些方法可能会使阴影的定位变得复杂，特别是当阴影的偏移量是相对图片自身时。
• display: none; 会使元素从文档流中完全移除，包括其阴影，因此不适用于此场景。

方法二：创建矩形或容器形状的阴影（使用 box-shadow）

如果你需要一个简单、矩形（或通过border-radius调整后的圆角）的阴影，并且不强求阴影精确跟随图片内容轮廓，那么将box-shadow应用于一个独立的容器元素是更简洁有效的方法。

实现原理

创建一个div元素作为容器，为其设置固定的宽度和高度，并应用box-shadow。图片本身可以放在这个容器内并隐藏，甚至完全不放置图片，只留下容器的阴影。

示例代码

HTML 结构：

<!-- 仅显示阴影的容器 -->
<div class="box-shadow-container"></div>

<!-- 包含图片但隐藏图片的容器（如果需要） -->
<div class="box-shadow-container with-image">
  <img src="nba.png" alt="NBA Logo" style="display: none;"> 
  <!-- 或者 opacity: 0; 或 visibility: hidden; -->
</div>

CSS 样式：

.box-shadow-container {
  width: 300px; /* 定义容器的宽度 */
  height: 300px; /* 定义容器的高度 */
  /* 应用box-shadow */
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.6); 
  margin-bottom: 30px; /* 示例间距 */
  /* 可以添加背景色或其他样式来辅助观察或填充 */
  /* background-color: lightgray; */
}

/* 如果容器内有图片，可以进一步隐藏 */
.box-shadow-container.with-image img {
    display: none; /* 彻底隐藏图片，不占据空间 */
    /* 或者使用 opacity: 0; 或 visibility: hidden; */
}

注意事项：

• box-shadow的阴影形状由容器的width、height和border-radius决定。
• 这种方法更加灵活，你可以完全移除<img>标签，只留下一个带有阴影的空div。
• 它不依赖于图片本身的透明度或形状，适用于任何需要矩形阴影的场景。

如何选择合适的方法？

• 如果你的阴影必须精确地跟随图片内容的非透明轮廓：请选择方法一（filter: drop-shadow + opacity: 0）。
• 如果你只需要一个简单的矩形或圆角矩形阴影，不要求跟随图片内容轮廓：请选择方法二（box-shadow应用于容器）。这种方法通常更简单、更易于控制，且不会有元素占据空间但不可见的潜在布局问题。

总结

在CSS中实现“隐藏图片本体但保留阴影”的效果，关键在于理解filter: drop-shadow和box-shadow两种属性的根本区别。filter: drop-shadow适用于需要精确跟随图片内容轮廓的复杂阴影，通过配合opacity: 0或visibility: hidden来隐藏图片。而box-shadow则适用于创建规则的矩形阴影，通常作用于一个独立的容器元素，提供了更简洁的实现方式。根据你的具体设计需求和对阴影形状的要求，选择最适合的方法即可。

以上就是CSS技巧：如何仅显示图片阴影而不显示图片本体的详细内容，更多请关注php中文网其它相关文章！