Блог

У меня есть это в моем 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
увеличить-background-images)

Одно из ваших правил здесь кажется совершенно избыточным. Правило под 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 вместе, затем используйте background position, чтобы переместить их в нужное положение / с глаз долой. Это сработало бы только в некоторых случаях, и это немного запутанно, в зависимости от макета. Я привел своего рода ленивый пример, просто чтобы вы поняли, что я имею в виду. Вероятно, вам придется создать спрайт с большим прозрачным пространством между 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. Оно предназначено для того, чтобы помочь вам, а не заставлять вас прыгать через обручи. Ваш код будет отлично работать в любом случае.

Надеюсь, это помогло.