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] 背景图片＆＃39 /public/system/assets/img/bglinkcars.png'多次使用，首先在第628行第1列声明。每个背景图像应该是唯一的。使用通用类例如精灵。（d uplicate背景图像）

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之间创建一个具有大量透明空间的精灵：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。它可以帮助你，而不是让你跳过篮球。无论哪种方式，您的代码都可以正常运行。

希望它有所帮助。

Csslint：背景图像被多次使用

1 个答案: