Trong mã của tôi background-position-ykhông hoạt động. Trong Chrome thì không sao, nhưng không hoạt động trên Firefox.

Bất cứ ai có bất kỳ giải pháp?

Nếu vị trí-x của bạn là 0, không có giải pháp nào khác ngoài việc viết:

background-position: 0 100px;

background-position-x là một triển khai không chuẩn đến từ IE. Chrome đã sao chép nó, nhưng đáng buồn là không phải firefox ...

Tuy nhiên, giải pháp này có thể không hoàn hảo nếu bạn có các sprite riêng biệt trên nền lớn, với các hàng và cột có nghĩa là những thứ khác nhau ... (ví dụ: các biểu trưng khác nhau trên mỗi hàng, được chọn / di chuột ở bên phải, đơn giản ở bên trái) Trong trường hợp đó, Tôi khuyên bạn nên tách bức tranh lớn thành các hình ảnh riêng biệt hoặc viết các kết hợp khác nhau trong CSS ... Tùy thuộc vào số lượng sprite, cái này hay cái khác có thể là lựa chọn tốt nhất.

Dùng cái này

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

Thay vì điều này

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

Firefox 49 sẽ được phát hành —với hỗ trợ background-position-[xy]— vào tháng 9 năm 2016. Đối với các phiên bản cũ hơn đến 31, bạn có thể sử dụng các biến CSS để định vị nền trên một trục tương tự như sử dụng background-position-xhoặc background-position-y. Các biến CSS đạt trạng thái Đề xuất Ứng viên vào tháng 12 năm 2015 .

Sau đây là một ví dụ đầy đủ về trình duyệt chéo về việc sửa đổi các trục vị trí nền cho hình ảnh sprite trên di chuột:

: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;là không làm việc trong trình duyệt web Firefox.

Bạn nên làm theo loại cú pháp này:

background-position: 10px 15px;

10px được liên kết với "position-x" và 15px được liên kết với "position-y"

100% giải pháp hoạt động

Theo dõi URL này để biết thêm ví dụ

Tại sao bạn không sử dụng trực tiếp vị trí nền ?

Sử dụng:

background-position : 40% 56%;

Thay vì:

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

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

Sẽ không hoạt động nếu bạn muốn có nền cùng với hình ảnh. Vì vậy, hãy sử dụng:

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

Điều này đã làm việc cho tôi:

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

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

Hãy chắc chắn rằng bạn trình bày rõ ràng về phép đo bù đắp của bạn. Tôi đã gặp phải vấn đề chính xác này hôm nay và đó là do cách trình duyệt diễn giải các giá trị bạn cung cấp trong CSS của mình.

Ví dụ: điều này hoạt động hoàn hảo trong Chrome:

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

Tuy nhiên, đối với Firefox và IE, bạn cần viết:

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

Hi vọng điêu nay co ich.

Tuy nhiên, giải pháp này có thể không hoàn hảo nếu bạn có các sprite riêng biệt trên nền lớn, với các hàng và cột có nghĩa là những thứ khác nhau ... (ví dụ: các biểu trưng khác nhau trên mỗi hàng, được chọn / di chuột ở bên phải, đơn giản ở bên trái) Trong trường hợp đó, Tôi khuyên bạn nên tách bức tranh lớn thành các hình ảnh riêng biệt hoặc viết các kết hợp khác nhau trong CSS ... Tùy thuộc vào số lượng sprite, cái này hay cái khác có thể là lựa chọn tốt nhất.

Của tôi có vấn đề chính xác như đã nêu bởi Orabîg có một bảng giống như sprite có các cột và hàng.

Dưới đây là những gì tôi đã sử dụng như một giải pháp thay thế bằng cách sử dụng js

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');   
    }
  });      
}