悠悠楠杉
网站页面
如何仅显示图片阴影而不显示图片本体
11/15
在现代网页设计中，视觉层次和光影效果是提升用户体验的重要手段。我们常常使用 box-shadow 或 drop-shadow() 来为图片添加立体感，但你是否曾想过——能否只保留这张图片的阴影，而让图片本身完全“隐形”？这听起来像是某种魔术，但在CSS的强大能力下，它完全可以实现。这种技巧常用于艺术型网站、产品展示页或交互式导航中，用以营造神秘、轻盈或未来感十足的视觉氛围。
要实现“只显示阴影，不显示图片本体”，关键在于分离“视觉内容”与“渲染效果”。图片本身需要存在（否则无从生成阴影），但我们可以通过各种方式让它不可见，同时确保其投影依然被浏览器计算并渲染出来。
最直接的方法之一是利用 伪元素 + box-shadow 的组合。我们可以将图片设置为容器的背景，然后通过一个伪元素来承载阴影，并将原图透明化。例如：
css
.shadow-only {
position: relative;
width: 300px;
height: 200px;
background: url('example.jpg') no-repeat center center / cover;
}
.shadow-only::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
pointer-events: none;
}
此时，.shadow-only 容器承载了图片作为背景，而 ::after 伪元素不显示任何内容，仅通过 box-shadow 投射出一个深色阴影。接下来，我们将容器本身的视觉内容“抹去”——这里可以使用 background-clip 配合 text-fill-color 等技巧，但更简单的方式是直接让背景不可见。
于是我们引入第二步操作：将背景“移出”可视区域或使其完全透明。但这会破坏阴影来源。因此，更好的做法是保持结构存在，但通过透明度控制让图片“消失”。
css
.shadow-only {
opacity: 0; /* 这会让整个元素包括伪元素都消失 */
}
注意！如果直接对父元素设置 opacity: 0，那么伪元素的阴影也会跟着消失。所以我们不能这样做。解决方案是：把图片和阴影分离开。
我们可以采用如下结构：
html
css
.shadow-caster {
display: inline-block;
position: relative;
}
.hidden-image {
opacity: 0;
filter: blur(0); /* 强制浏览器渲染该元素 */
position: relative;
z-index: 1;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
}
你会发现，虽然图片透明了，但它的阴影仍然存在！这是因为在CSS中，即使一个元素的 opacity 为0，只要它仍在文档流中且未被 display: none，其 box-shadow 依然会被渲染。这是一个常被忽视但极为有用的特性。
不过，这种方法依赖于真实图片的存在，且可能影响页面性能（尤其是多张图片时）。更优雅的做法是使用 filter: drop-shadow() 配合透明图像。
考虑以下方案：
css
.shadow-only-container {
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.8));
}
.shadow-only-container img {
visibility: hidden; /* 不占据空间但保留渲染 */
}
visibility: hidden 会使图片不可见，但仍保留在布局中，因此 drop-shadow 能够基于其形状生成轮廓阴影。相比 opacity: 0，这种方式更稳定，尤其适合不规则图形的阴影提取。
此外，若想获得更精细的控制，比如只保留阴影边缘、模糊扩散区域，可结合 SVG 滤镜或 CSS clip-path 对阴影进行裁剪与变形。例如：
css
.shadow-only-container {
filter: drop-shadow(0 30px 20px #000) contrast(200%) brightness(150%);
}
通过增强对比度和亮度，可以让原本微弱的阴影更加突出，仿佛漂浮在页面之上。
