该段CSS代码是否重复冗余？是否可以进行简化？

问题1：是否存在重复冗余？ #

这段CSS存在非常明显的冗余，冗余点分为两类：

• 前缀冗余：-moz-、-webkit-、-ms-开头的线性渐变前缀完全不需要保留。根据浏览器兼容性统计，标准linear-gradient在Chrome 26+、Firefox 16+、Edge 12+版本中都已经原生支持，仅兼容10年以上的古董浏览器才需要这些前缀，面向普通用户的场景完全可以删除。
• 渐变逻辑冗余：原代码用两个完全相同的RGBA值生成渐变，本质就是生成一个纯色半透明图层，渐变本身的写法存在无意义的重复。

问题2：可以简化为更简洁的写法吗？ #

完全可以，简化后的代码和原代码效果完全一致，推荐两种写法：

写法1：极简渐变实现（和原实现逻辑完全一致，兼容性最好） #

#main > header {
  background-image: linear-gradient(rgba(0,0,0,0.5) 0 0), url("../.jpg");
}

说明：

• 标准线性渐变默认方向就是从上到下，不需要额外写top参数
• 单个颜色值后跟0 0表示整个渐变区域都填充该颜色，不需要重复写两次相同的RGBA值
• 无任何多余前缀，覆盖率达99%以上的全球用户设备

如果追求更短的写法，还可以用四位十六进制透明色缩写：

#main > header {
  background-image: linear-gradient(#0008 0 0), url("../.jpg");
}

其中#0008等价于rgba(0,0,0,0.5)。

写法2：不用渐变的实现（代码更短） #

如果不需要兼容IE系列浏览器，还可以用背景层混合实现，逻辑更直观：

#main > header {
  background: rgba(0,0,0,0.5) url("../.jpg");
  background-blend-mode: overlay;
}

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