如何在CSS中使用::before为图片添加阴影遮罩-css教程-PHP中文网

img是替换元素，不支持::before/after伪元素；需用父容器（如div）设position:relative，再对容器使用::before并设置content、绝对定位和遮罩样式。

如何在css中使用::before为图片添加阴影遮罩

为什么直接对使用 `::before` 无效

因为是替换元素（replaced element），默认是 inline 级别，且不生成伪元素的渲染上下文——::before 和 ::after 在它上面不会显示。浏览器会忽略，连布局都不参与。

常见错误现象：img::before { content: ""; box-shadow: 0 0 10px rgba(0,0,0,.5); } 完全没反应，控制台也无报错。

必须将包在块级容器中（如 或）
该容器需设置 position: relative，为伪元素提供定位锚点



::before 必须有 content（哪怕为空字符串），否则不渲染
正确写法：用父容器 + ::before 叠加遮罩阴影
核心思路是让伪元素覆盖在图片上方，通过半透明背景或模糊滤镜模拟“阴影遮罩”效果，而非给图片本身加阴影。

											
												
												
													CSS婚礼策划服务机构宣传网站模板
													CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
												
												下载
												
											
										
.img-container {
  position: relative;
  display: inline-block;
}

.img-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 30%, rgba(0,0,0,0.2), transparent 70%);
  pointer-events: none;
}


pointer-events: none 确保鼠标事件穿透到图片，不影响点击/拖拽
用 radial-gradient 比纯 box-shadow 更可控，能做出聚焦式暗角遮罩
若要模拟投影感，可叠加 filter: blur(4px) 配合透明度，但注意性能开销


box-shadow 和 filter: drop-shadow() 的关键区别
很多人误以为给伪元素加 box-shadow 就是“图片阴影”，但实际效果取决于伪元素形状——如果伪元素是矩形满盖，阴影只是绕容器边缘；而 drop-shadow() 作用于内容 Alpha 通道，更贴合图片轮廓。

伪元素上用 box-shadow: 0 4px 12px rgba(0,0,0,0.3) → 阴影是方框轮廓
伪元素上用 filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)) → 阴影跟随图片透明区域（如 PNG 裁切边）

drop-shadow() 不支持 inset，且旧版 Safari 对多层 filter 支持不稳定

响应式场景下容易被忽略的尺寸同步问题
当图片设为 max-width: 100% 或使用 object-fit 时，伪元素若用 top/left/right/bottom: 0，可能因父容器 padding、border 或盒模型计算偏差导致错位。

确保父容器 box-sizing: border-box

避免在父容器上设 padding，改用内边距由伪元素自身控制（如 margin 或 transform 微调）
图片高度不确定时，慎用 height: 100% —— 推荐用 aspect-ratio 配合 overflow: hidden 防止伪元素溢出



真正起作用的从来不是伪元素本身，而是它和父容器、图片三者之间的层叠顺序与尺寸绑定关系。漏掉任何一个，阴影就变成“看不见的影子”。