Блог

Главная - Вопросы по программированию - установите или сдвиньте фоновое изображение с помощью css / less для firefox

установите или сдвиньте фоновое изображение с помощью css / less для firefox

#css #background #less #background-position

#css #фон #Меньше #background-позиция

Вопрос:

У меня есть ниже, который действительно хорошо работает для всех браузеров, кроме Firefox.

В основном он загружает фоновое изображение спрайта и позиционирует его в зависимости от классов. Есть ли обходной путь для Firefox или лучший способ?

пример страницы — http://smf.jynk.net/events/making-progress-boosting-the-skills-and-wage-prospects-of-the-low-paid /

 .social__icon--share{
  .svg-bg('smf-site-icons-02',@position: -200px -200px) ;

  .single-publications amp;{
      background-position-y: -200px;
  }   
  .single-events amp;{
      background-position-y:-400px;    
  }
  .single-post amp;{
      background-position-y:-600px;      
  }
  display: inline-block;
  width: 31px;
  height: 31px;

  amp;.social__icon--share--twitter{
    background-position-x: -200px;
  }

  amp;.social__icon--share--facebook{
    background-position-x: -800px;
  }

  amp;.social__icon--share--google{
    background-position-x: -1000px;
  }

  amp;.social__icon--share--linkedin{
    background-position-x: -1200px;
  }

  amp;.social__icon--share--pinterest{
    background-position-x: -1400px;
  }

}

Комментарии:

1. Можете ли вы объяснить, что должно произойти и что происходит на самом деле (и, конечно, добавить jsfiddle)?

2. по сути, Firefox нуждался в обоих x и y одновременно, поэтому background-position-y игнорировался.

Ответ №1:

Найден обходной путь с микшированием — 

 .bgpos(@ypos) {
amp;.social__icon--share--twitter{
  background-position: -200px @ypos;
}

amp;.social__icon--share--facebook{
  background-position: -800px @ypos;
}

amp;.social__icon--share--google{
  background-position: -1000px @ypos;
}

amp;.social__icon--share--linkedin{
  background-position: -1200px @ypos;
}

amp;.social__icon--share--pinterest{
  background-position: -1400px @ypos;
}
}
  // icons.less
  .single-publications amp;{
      .bgpos(-200px);
  }   
  .single-events amp;{
      .bgpos(-400px);    
  }
  .single-post amp;{
      .bgpos(-600px);     
  }