CSS实现图片边缘渐变淡出效果失败求助，含背景遮罩场景

修改后的完整代码 #

CSS 代码

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: inline-block;
  overflow: hidden;
  margin-top: -6px;
}

.bg {
  background-image: url('//newsinteractive.post-gazette.com/.testLaura2/shutterstock_246230623.jpg');
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  filter: blur(3px);
}

.bg-mask {
  width: 100%;
  background-color: rgba(255, 255, 255, .8);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}

#ballerina {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1600px;
  height: 1000px;
  background-image: url('http://newsinteractive.post-gazette.com/.testLaura2/BalletAudition04xx_2992.jpg');
  overflow: hidden; /* 限制伪元素模糊范围 */
}

#ballerina:after {
  content: ""; /* 伪元素必须添加content才能渲染 */
  position: absolute;
  inset: 0; /* 替代top/left/width/height，铺满整个容器 */
  /* 火狐浏览器兼容 */
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(255,255,255,0.8) 100%);
  /* Chrome、Safari 4+ 兼容 */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0.8)));
  /* Chrome 10+、Safari 5.1+ 兼容 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(255,255,255,0.8) 100%);
  /* Opera 11.10+ 兼容 */
  background: -o-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(255,255,255,0.8) 100%);
  /* IE10+ 兼容 */
  background: -ms-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(255,255,255,0.8) 100%);
  /* 标准写法 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,0.8) 100%);
  /* IE6-9 兼容 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff', GradientType=0);
  filter: blur(8px); /* 添加模糊效果，数值可按需调整 */
  z-index: 1; /* 确保遮罩在图片上方 */
}

HTML 代码

<div class="bg"></div>
<div class="bg-mask"></div>

<div class="screen height-auto">
  <div id="ballerina"></div>
</div>

核心调整说明 #

1. 适配页面遮罩色调：将原伪元素的黑色渐变改为与页面白色遮罩一致的rgba(255,255,255,0.8)，保证视觉统一，避免突兀的黑色过渡。
2. 修复伪元素渲染问题：添加content: ""，确保伪元素正常显示；用inset: 0替代固定宽高，让伪元素完全铺满图片容器。
3. 实现模糊淡出：给伪元素添加filter: blur(8px)，让渐变边缘产生自然的模糊淡出效果，模糊程度可通过调整数值改变。
4. 限制模糊范围：给#ballerina添加overflow: hidden，防止伪元素的模糊效果超出图片容器边界。

内容的提问来源于stack exchange，提问作者LauraNMS