내 코드에서는 background-position-y작동하지 않습니다. Chrome에서는 괜찮지 만 Firefox에서는 작동하지 않습니다.

누구든지 해결책이 있습니까?

위치 x가 0이면 작성하는 것 외에 다른 해결책은 없습니다.

background-position: 0 100px;

background-position-x는 IE에서 제공되는 비표준 구현입니다. 크롬은 그것을 복사했지만 슬프게도 파이어 폭스는 아닙니다 ...

그러나이 솔루션은 큰 배경에 별도의 스프라이트가 있고 행과 열이 다른 것을 의미하는 경우 완벽하지 않을 수 있습니다 ... (예를 들어 각 행에 다른 로고가 있고 오른쪽에 선택 / 호버가 있고 왼쪽에 일반)이 경우, 큰 그림을 별도의 이미지로 분리하거나 CSS에 다른 조합을 작성하는 것이 좋습니다. 스프라이트 수에 따라 하나 또는 다른 하나가 최선의 선택이 될 수 있습니다.

이것을 사용하십시오

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

이 대신

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

파이어 폭스 (49)는 해제됩니다 에 대한 지원 가진 - background-position-[xy]31 일까지 사용할 수있는 이전 버전의 9 월 2016 -in CSS 변수를 사용하는 것과 비슷 하나의 축에 배경의 위치를 달성하기 위해 background-position-x나 background-position-y. CSS 변수는 2015 년 12 월 에 후보 추천 상태 에 도달했습니다 .

다음은 마우스 오버시 스프라이트 이미지의 배경 위치 축을 수정하는 완전한 브라우저 간 예제입니다.

: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;되어 작동하지 파이어 폭스 웹 브라우저에서.

다음 유형의 구문을 따라야합니다.

background-position: 10px 15px;

10px는 "position-x"에 바인딩되고 15px는 "position-y"에 바인딩됩니다.

100 % 작업 솔루션

더 많은 예를 보려면 이 URL 을 따르십시오.

배경 위치를 직접 사용하지 않는 이유는 무엇 입니까?

사용하다:

background-position : 40% 56%;

대신에:

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

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

이미지와 함께 배경을 원하는 경우 작동하지 않습니다. 따라서 다음을 사용하십시오.

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

이것은 나를 위해 일했습니다.

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

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

오프셋 측정을 명시 적으로 명시해야합니다. 오늘이 정확한 문제를 발견했는데 브라우저가 CSS에서 제공하는 값을 해석하는 방식 때문이었습니다.

예를 들어, 이것은 Chrome에서 완벽하게 작동합니다.

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

그러나 Firefox 및 IE의 경우 다음을 작성해야합니다.

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

도움이 되었기를 바랍니다.

그러나이 솔루션은 큰 배경에 별도의 스프라이트가 있고 행과 열이 다른 것을 의미하는 경우 완벽하지 않을 수 있습니다 ... (예를 들어 각 행에 다른 로고가 있고 오른쪽에 선택 / 호버가 있고 왼쪽에 일반)이 경우, 큰 그림을 별도의 이미지로 분리하거나 CSS에 다른 조합을 작성하는 것이 좋습니다. 스프라이트 수에 따라 하나 또는 다른 하나가 최선의 선택이 될 수 있습니다.

내 것은 열과 행이있는 스프라이트와 같은 테이블이있는 Orabîg에 의해 언급 된 정확한 문제가 있습니다.

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