background-position-y không hoạt động trong Firefox (qua CSS)?

Question

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

Bất kỳ ai có giải pháp nào?

Answer 1

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

background-position: 0 100px; 

background-position-x là một thực hiện phi tiêu chuẩn đến từ IE. Chrome đã sao chép nó, nhưng đáng tiếc 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 hình riêng biệt trên nền lớn, với hàng và cols có nghĩa là những thứ khác nhau ... (ví dụ: Trong trường hợp đó, tôi muốn đề nghị tách hình ảnh lớn thành 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 hình ảnh, một hoặc khác có thể là sự lựa chọn tốt nhất.

Answer 2

Sử dụng 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; 

Answer 3

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

Mỏ có vấn đề chính xác như được tuyên bố bởi Orabîg có bảng giống như ma có cột và hàng.

Dưới đây là những gì tôi được sử dụng như một cách giải quyết bằ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'); 
    } 
    });  
} 

Answer 4

Hãy chắc chắn bạn nói rõ đo bù đắp của bạn. Tôi đã xem xét vấn đề chính xác này ngày hôm nay và đó là do cách trình duyệt giải thích 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; 

Nhưng, cho Firefox và IE, bạn cần phải viết:

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

Hope this helps.

Answer 5

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

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

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

Answer 6

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

Answer 7

Firefox 49 will be released hỗ trợ -với cho background-position-[xy] -in tháng 9 năm 2016.Đối với các phiên bản cũ hơn lên đến 31, bạn có thể sử dụng CSS variables để đạt được vị trí nền trên trục đơn tương tự như sử dụng background-position-x hoặc background-position-y. Các biến CSS đã đạt đến trạng thái Đề xuất ứng cử viên in December 2015.

Sau đây là một ví dụ hoàn toàn qua trình duyệt của thay đổi vị trí nền đường trục cho các hình ảnh ma 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; } 

Answer 8

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 kiểu này cú pháp:

background-position: 10px 15px; 

100% Giải pháp làm việc

Answer 9

Tại sao bạn không sử dụng background-position trực tiếp?

Sử dụng:

background-position : 40% 56%; 

Thay vào đó Of:

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