CSS实现图片四周渐变遮罩：现有效果不符，需调整遮罩范围

完整代码实现 #

给图片套一个容器，通过伪元素实现多层渐变遮罩：

<div class="image-mask-wrapper">
  <img src="你的图片URL" alt="图片描述">
</div>

.image-mask-wrapper {
  position: relative;
  /* 根据布局调整，用inline-block可自适应图片尺寸 */
  display: inline-block;
}

.image-mask-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 叠加两个渐变：顶部渐变 + 左右渐变 */
  background-image: 
    /* 顶部少量遮罩：半透明深色过渡到透明，占顶部8%高度 */
    linear-gradient(to bottom, rgba(23, 23, 23, 0.6) 0%, rgba(23, 23, 23, 0) 8%),
    /* 左右加宽遮罩：透明起始点调整到25%，扩大遮罩范围 */
    linear-gradient(90deg,
      #171717 0%,
      rgba(23, 23, 23, 0.98) 5%,
      rgba(23, 23, 23, 0.9) 10%,
      rgba(23, 23, 23, 0.7) 15%,
      rgba(23, 23, 23, 0.4) 20%,
      rgba(23, 23, 23, 0) 25%,
      rgba(23, 23, 23, 0) 75%,
      rgba(23, 23, 23, 0.4) 80%,
      rgba(23, 23, 23, 0.7) 85%,
      rgba(23, 23, 23, 0.9) 90%,
      rgba(23, 23, 23, 0.98) 95%,
      #171717 100%);
  pointer-events: none; /* 不干扰图片的点击等交互 */
}

关键调整说明 #

• 加宽左右遮罩：将原代码中透明区域的起始点从16.66%改为25%，保留渐变过渡节点确保边缘柔和，遮罩范围比原效果大幅扩大。
• 添加顶部遮罩：新增垂直方向线性渐变，仅在顶部8%高度内实现半透明到全透明的过渡，满足少量顶部遮罩的需求。
• 伪元素实现优势：用容器伪元素叠加遮罩，不修改图片本身样式，也不影响图片的交互事件。

自定义调整建议 #

• 若需更大左右遮罩范围，可将25%改为30%或更高；
• 修改顶部遮罩高度，只需调整垂直渐变中的8%数值；
• 遮罩颜色和透明度可通过修改rgba(23,23,23,X)中的X值调整。

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