网站图片是否需带曝光导出？如何用CSS实现曝光/偏移/伽马校正

1. 网站图片是否需要带曝光效果导出？如何用CSS设置曝光、偏移和伽马校正参数？ #

• 两种方案各有适用场景：
  • 带效果导出：适合对老旧浏览器兼容性要求极高的场景，但后续修改效果需重新导出图片，灵活性差。
  • CSS实现：无需重复导出图片，可实时调整参数，维护效率更高，推荐优先采用。

CSS实现方式：

• 基础曝光调整可直接使用filter: exposure()，但该函数仅控制曝光值，无法直接设置offset和gamma correction。
• 若需同时控制三个参数，可通过自定义CSS滤镜实现：
  • 组合brightness()、contrast()等基础滤镜函数模拟近似效果；
  • 或使用filter: url()引用自定义SVG滤镜，实现更精确的参数控制。

2. 模拟PS曝光参数（exposure=-0.60、offset=+0.0150、gamma correction=1.00）的CSS实现 #

Photoshop中曝光调整的核心公式（针对RGB通道）为：

输出值 = clamp( (输入值 + offset) * pow(2, exposure) , 0, 1 )
注：gamma correction=1.00时，无需额外做伽马转换，因为gamma=1代表线性色彩映射

以下是两种可直接复用的CSS实现方案：

方案1：CSS变量+伪元素叠加（现代浏览器支持） #

.image-with-exposure {
  --exposure: -0.6;
  --offset: 0.015;
  /* 曝光值转换：pow(2,-0.6)≈0.6687，对应亮度缩放比例 */
  filter: brightness(0.6687);
  position: relative;
}
/* 模拟offset提亮效果 */
.image-with-exposure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255, calc(var(--offset) * 255));
  mix-blend-mode: screen;
  pointer-events: none;
}

方案2：SVG滤镜（兼容性更广） #

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="ps-exposure">
    <!-- 应用offset偏移 -->
    <feComponentTransfer>
      <feFuncR type="linear" slope="1" intercept="0.015"/>
      <feFuncG type="linear" slope="1" intercept="0.015"/>
      <feFuncB type="linear" slope="1" intercept="0.015"/>
    </feComponentTransfer>
    <!-- 应用exposure=-0.6的亮度缩放 -->
    <feComponentTransfer>
      <feFuncR type="linear" slope="0.6687"/>
      <feFuncG type="linear" slope="0.6687"/>
      <feFuncB type="linear" slope="0.6687"/>
    </feComponentTransfer>
  </filter>
</svg>

使用时调用滤镜：

.image-with-exposure {
  filter: url(#ps-exposure);
}

明暗变化说明：

• exposure=-0.6会将整体亮度压缩至原有水平的约67%，主要压暗高光区域；
• offset=+0.015给所有像素的RGB值添加固定偏移，轻微提亮暗部，避免暗部细节完全丢失；
• gamma=1.00保持色彩的线性映射，不会改变中间调的对比度分布。

3. Photoshop 21.1.1中exposure、offset、gamma correction的定义及exposure的作用 #

参数定义： #

• Exposure（曝光）：以EV（曝光值）为单位，通过调整高光区域模拟相机曝光量变化。正数增加曝光（提亮高光），负数减少曝光（压暗高光）。
• Offset（偏移）：给所有像素的RGB值添加固定偏移量，主要作用是提亮暗部，对高光区域影响较小，数值范围通常在-0.5到+0.5之间。
• Gamma Correction（伽马校正）：通过非线性调整改变图像对比度，主要影响中间调。gamma值大于1会降低中间调亮度（加深暗部），小于1会提亮中间调，等于1时无变化。

Exposure的核心作用： #

• 快速调整图像整体亮度，重点修复高光区域的过曝/欠曝问题；
• 模拟真实摄影的曝光调整逻辑，让图片光影更贴近真实拍摄效果；
• 与offset配合使用时，可在压暗高光的同时保留暗部细节，避免暗部丢失层次感。

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