node.js - Csslint:多次使用背景图像

Question

我的 CSS 中有这个:

@media screen and (max-width:1200px) {
#cssmenu {
  background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
  width: 100%;
}
}    

@media screen and (max-width:970px) {
#cssmenu {
  background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
  width: 150px;
}
}

我在 csslint 任务中遇到错误:

Background image '/public/system/assets/img/bgprofile.jpg' was used multiple times, first declared at line 753, col 3. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)

有没有办法声明这些图像，这样我就不会收到这个错误？

编辑(另一种情况):

.linkmycars
{
background:url('/public/system/assets/img/sub.png') no-repeat right 20px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
.addcars
 {
 background:url('/public/system/assets/img/add.png') no-repeat right 17px,  url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
 }

我得到这个错误:[L651:C1] 背景图像“/public/system/assets/img/bglinkcars.png”被多次使用，第一次在第 628 行第 1 列声明。每个背景图像都应该是唯一的。使用通用类，例如 Sprite 。 (d 复制背景图像)

Answer 1

您的其中一条规则似乎完全多余。 max-width: 970px 下的规则在 max-width: 1200px 下已经成立。

回顾一下，将其更改为:

@media screen and (max-width:1200px) {
  #cssmenu {
    background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
    width: 100%;
  }
}    

@media screen and (max-width:970px) {
  #cssmenu {
    width: 150px;
  }
}

---

至于您编辑过的问题，您面临两种选择。因为你有不同的图像，所以你不能在那里组合这两个规则。

选项一: Sprite sub.png 和 add.png 在一起，然后使用背景位置将它们移动到位置/视线之外。这只在某些情况下有效，而且有点乱，具体取决于布局。我做了一个懒惰的例子，只是为了让你明白我的意思。您可能必须创建一个在 sub.png 和 add.png 之间有很多透明空间的 Sprite :jsfiddle

选项二:更简单但语义更少。与其使用多个背景，不如使用多个元素。 jsfiddle和例子:

HTML:

<div class="tiles"><div class="linkmycars"></div></div>
<div class="tiles"><div class="addcars"></div></div>

CSS:

.tiles {
  background: url(/public/system/assets/img/bgprofile.jpg) repeat-x;             
}

.linkmycars, .addcars {
    width: 100%;
    height: 100%;  
}

.linkmycars {
  background: url('/public/system/assets/img/sub.png') no-repeat right 20px;
}

.addcars {
  background: url('/public/system/assets/img/add.png') no-repeat right 17px;
}  

第三种选择:不要太担心 csslint。它是为了帮助你，而不是让你跳过障碍。无论哪种方式，您的代码都可以很好地工作。

希望对您有所帮助。