如何解决CSS Lint检测到重复background-image的警告？

你的问题很典型——为了兼容旧浏览器手动添加带前缀的background-image声明，结果被CSS Lint标记为重复属性警告。下面给你几个实用的解决思路：

1. 使用CSS自定义属性（变量）复用重复内容 #

虽然还是会保留多个background-image声明，但通过变量可以把重复的背景图URL和渐变参数抽离出来，让代码更整洁，也方便后续维护：

.single-product.postid-92613 .site-content, 
.single-product.postid-92613 header#masthead, 
.single-product.postid-92613 .site-footer, 
.single-product.postid-92613 .sfb-footer-bar {
  --background-url: url("/wp-content/uploads/2020/08/pic.jpg");
  --gradient-standard: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));
  --gradient-webkit: -webkit-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));
  --gradient-webkit-legacy: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .1)), to(rgba(0, 0, 0, .3)));
  --gradient-moz: -moz-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));
  --gradient-o: -o-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));
  --gradient-ms: -ms-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));

  /* 按标准到前缀的顺序声明，确保浏览器优先识别标准语法 */
  background-image: var(--gradient-standard), var(--background-url)!important;
  background-image: var(--gradient-moz), var(--background-url)!important;
  background-image: var(--gradient-o), var(--background-url)!important;
  background-image: var(--gradient-ms), var(--background-url)!important;
  background-image: var(--gradient-webkit-legacy), var(--background-url)!important;
  background-image: var(--gradient-webkit), var(--background-url)!important;
  
  background-attachment: fixed!important;
  background-size: cover!important;
  background-position: 100% 0!important;
}

这种方式不会消除CSS Lint的警告，但能大幅提升代码的可维护性，避免重复修改多个相同的URL或渐变值。

2. 调整CSS Lint规则，忽略前缀导致的重复属性 #

CSS Lint的duplicate-properties规则默认会标记所有重复属性，但你可以通过注释或配置文件让它忽略用于浏览器兼容的重复声明：

方式一：在CSS文件顶部添加禁用注释 #

/* csslint duplicate-properties: false */

如果想更精细（只允许不同值的重复属性），可以这样写：

/* csslint duplicate-properties: ["allow-duplicates-with-different-values"] */

方式二：修改配置文件 #

如果是使用构建工具（如Webpack、Gulp）搭配CSS Lint，可以在项目根目录的.csslintrc文件中添加规则：

{
  "duplicate-properties": ["allow-duplicates-with-different-values"]
}

这样CSS Lint就会理解这些重复的background-image是故意为了兼容而写的，不再发出警告。

3. 用Autoprefixer自动生成前缀（推荐方案） #

现在手动编写浏览器前缀已经是过时的做法了，Autoprefixer可以根据你指定的浏览器兼容范围，自动为CSS属性添加必要的前缀。你只需要写标准的CSS代码：

.single-product.postid-92613 .site-content, 
.single-product.postid-92613 header#masthead, 
.single-product.postid-92613 .site-footer, 
.single-product.postid-92613 .sfb-footer-bar {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
  background-attachment: fixed!important;
  background-size: cover!important;
  background-position: 100% 0!important;
}

然后通过构建工具（或在线工具）运行Autoprefixer，它会自动生成包含所有必要前缀的CSS代码。这种方式不仅能让你只维护一份标准代码，彻底避免CSS Lint的重复属性警告，还能确保前缀的准确性和时效性（比如自动移除已经不需要的旧浏览器前缀）。

内容的提问来源于stack exchange，提问作者Fine Love Dolls