Benim kodumda background-position-yçalışmıyor. Chrome'da sorun yok, ancak Firefox'ta çalışmıyor.

Herhangi bir çözümü olan var mı?

Konum-x'iniz 0 ise, yazmaktan başka bir çözüm yoktur:

background-position: 0 100px;

background-position-x, IE'den gelen standart olmayan bir uygulamadır. Chrome bunu kopyaladı, ancak ne yazık ki firefox değil ...

Bununla birlikte, büyük bir arka planda farklı şeyler anlamına gelen satırlar ve sütunlar içeren ayrı sprite'larınız varsa bu çözüm mükemmel olmayabilir ... (örneğin, her satırda farklı logolar, sağda seçili / vurgulanmış, solda düz) Bu durumda, Büyük resmi ayrı görsellere ayırmanızı veya CSS'ye farklı kombinasyonları yazmanızı öneririm ... Sprite sayısına bağlı olarak, biri veya diğeri en iyi seçim olabilir.

Bunu kullan

background: url("path-to-url.png") 89px 78px no-repeat;

Bunun yerine

background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;

Firefox 49 ,background-position-[xy] Eylül 2016'da - desteği ile birlikte - piyasaya sürülecektir . 31'e kadar olan eski sürümler için , arka planı veya kullanımına benzer şekilde tek bir eksende konumlandırmak için CSS değişkenlerini kullanabilirsiniz . CSS değişkenleri Aralık 2015'te Aday Öneri durumuna ulaştı .background-position-xbackground-position-y

Aşağıda, fareyle üzerine gelindiğinde hareketli grafik görüntüleri için arka plan konumu eksenlerini değiştirmenin tam anlamıyla çapraz tarayıcı örneği verilmiştir:

:root {
    --bgX: 0px;
    --bgY: 0px;
}

a {
    background-position: 0px 0px;
    background-position: var(--bgX) var(--bgY);
}

a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active   { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px;  }
a.gplus    { background-position-y: -40px; --bgY: -40px;  }

background-position-y :10px;olduğu çalışmıyor Firefox web tarayıcısında.

Bu tür sözdizimini izlemelisiniz:

background-position: 10px 15px;

10px, "position-x" ile ve 15px, "position-y" ile sınırlıdır

% 100 çalışan Çözüm

Daha fazla örnek için bu URL'yi izleyin

Neden doğrudan arka plan konumunu kullanmıyorsunuz ?

Kullanım:

background-position : 40% 56%;

Onun yerine:

background-position-x : 40%;
background-position-y : 56%

background: url("path") 89px 78px no-repeat;

Resimle birlikte bir arka plan istiyorsanız çalışmaz. Öyleyse kullan:

background: orange url("path-to-image.png") 89px 78px no-repeat;

Bu benim için çalıştı:

a {
    background-image: url(/image.jpg);
    width: 228px;
    height: 78px;
    display: inline-block;
}

a:hover {
    background-position: 0 -78px;
    background-repeat: no-repeat;
}

Ofsetinizin ölçümünü açıkça belirttiğinizden emin olun. Bugün tam olarak bu sorunla karşılaştım ve bunun nedeni tarayıcıların CSS'nizde sağladığınız değerleri nasıl yorumladıklarıydı.

Örneğin, bu Chrome'da mükemmel çalışır:

background: url("my-image.png") 100 100 no-repeat;

Ancak, Firefox ve IE için şunları yazmanız gerekir:

background: url("my-image.png") 100px 100px no-repeat;

Bu yardımcı olur umarım.

Bununla birlikte, büyük bir arka planda farklı şeyler anlamına gelen satırlar ve sütunlar içeren ayrı sprite'larınız varsa bu çözüm mükemmel olmayabilir ... (örneğin, her satırda farklı logolar, sağda seçili / vurgulanmış, solda düz) Bu durumda, Büyük resmi ayrı görsellere ayırmanızı veya CSS'ye farklı kombinasyonları yazmanızı öneririm ... Sprite sayısına bağlı olarak, biri veya diğeri en iyi seçim olabilir.

Sprite gibi sütun ve satırları olan bir tabloya sahip olan Orabîg'in ​​belirttiği gibi tam olarak benimki sorunu var.

Aşağıda js kullanarak geçici çözüm olarak kullandım

firefoxFixBackgroundposition:function(){
  $('.circle').on({
    mouseenter: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');   
    },
    mouseleave: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');   
    }
  });      
}