3

我的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 列声明。每个背景图像都应该是唯一的。为例如精灵使用一个公共类。（d 复制背景图像）

4

1 回答 1

2

您在这里的一条规则似乎完全多余。下的规则在下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;
  }
}



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

选项一：精灵 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。它可以帮助您，而不是让您跳过篮球。无论哪种方式，您的代码都会很好地工作。

希望它有所帮助。

于 2014-07-07T05:43:46.090 回答