如何用CSS3实现旧版filter: alpha(style=3)的矩形透明渐变？

你已经完美搞定了IE旧版filter: alpha(opacity=65, style=N)里前三种样式的CSS3替代方案，但卡在了style=3的椭圆渐变遮罩上——毕竟CSS的mask-image确实没有原生的rectangular-gradient选项。不过咱们可以用径向渐变来精准模拟这个效果，下面就给你具体的实现方案：

先回顾已实现的对应效果 #

先确认下你已经完成的三种样式对应关系，确保咱们对齐：

• style=0：整体统一透明度 → 用filter: opacity(65%)实现
• style=1：线性方向的透明度渐变 → 用mask-image: linear-gradient(to left, transparent, black)实现
• style=2：圆形径向透明度渐变 → 用mask-image: radial-gradient(circle, black, transparent 65%)实现

style=3的CSS3实现方案 #

IE的style=3对应的是适配元素宽高比的椭圆径向渐变遮罩，从元素中心向四周逐渐过渡到透明。咱们只需要把径向渐变的形状从circle改成ellipse，就能自动适配元素的宽高比，生成对应的椭圆渐变效果。

完整的CSS代码如下：

/* CSS3 完整实现所有4种style效果 */
.foto_1 { filter: opacity(65%); }
.foto_2 { filter: opacity(65%); mask-image: linear-gradient(to left, transparent, black); }
.foto_3 { filter: opacity(65%); mask-image: radial-gradient(circle, black, transparent 65%); }
.foto_4 { 
  filter: opacity(65%); 
  mask-image: radial-gradient(ellipse, black, transparent 65%); 
}

对应的HTML结构保持不变：

<div class="div_2"><img src="https://i.sstatic.net/HGRgk.jpg" alt=""><img class="foto_1" src="https://i.sstatic.net/HGRgk.jpg" alt=""></div>
<div class="div_2"><img src="https://i.sstatic.net/HGRgk.jpg" alt=""><img class="foto_2" src="https://i.sstatic.net/HGRgk.jpg" alt=""></div>
<div class="div_2"><img src="https://i.sstatic.net/HGRgk.jpg" alt=""><img class="foto_3" src="https://i.sstatic.net/HGRgk.jpg" alt=""></div>
<div class="div_2"><img src="https://i.sstatic.net/HGRgk.jpg" alt=""><img class="foto_4" src="https://i.sstatic.net/HGRgk.jpg" alt=""></div>

效果说明 #

• radial-gradient(ellipse, ...)会根据元素的实际宽高比自动生成椭圆渐变，完全匹配IE style=3的矩形椭圆渐变效果
• transparent 65%的数值对应原滤镜的opacity=65，你可以根据视觉效果微调这个百分比，让它和旧版效果更接近
• 保留filter: opacity(65%)是为了和原滤镜的基础透明度参数保持一致，确保整体透明度匹配

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