파이어 폭스 배경 위치 비율이 작동하지 않습니다.

Question

이미지 집합을 큰 이미지로 병합하여 HTTP 요청을 저장하고 background-position을 백분율로 사용하여 사용할 이미지를 조정합니다. 이미지 너비는 부모 요소에 의해 제어되므로 픽셀보다는 백분율이 사용됩니다.

병합 이미지와 같은 것입니다 :

렌더링 결과에 대한로서, http://zhujianer.com/에서 처음 다섯 개 개의 이미지를 참조하시기 바랍니다.

Chrome에서 잘 작동합니다. 콘솔에서 CSS 선택 도구를 볼 수 있습니다.

그러나 예기치 않게 Firefox에서 동일한 이미지가 사용됩니다. (Mac의 FF 17.0.1에서 테스트되었습니다.) Firebug에서 셀렉터가 있지만, 속성은 없어졌습니다. 그리고 그것을 추가하더라도, FF는 자동으로 제거합니다. 그래서 이것은 FF에 불법으로 간주됩니다.

전체 CSS 코드 (SCSS를 사용하여)된다

.process { 
    width: 120px; 
    height: 120px; 
    max-width: 100%; 
    border-radius: 60px; 
    margin: 0 auto; 

    .image-block { 
     width: 90%; 
     height: 90%; 
     background-size: 500%; 
     margin: 0 auto; 
     position: relative; 
     top: 5%; 
     background-image: url('../img/process.png'); 

     &:hover { 
      background-position-y: 100%; 
     }; 
    } 

    &#process-idea .image-block { 
     background-position-x: 0; 
    } 

    &#process-design .image-block { 
     background-position-x: -100%; 
    } 

    &#process-code .image-block { 
     background-position-x: -200%; 
    } 

    &#process-launch .image-block { 
     background-position-x: -300%; 
    } 

    &#process-monitor .image-block { 
     background-position-x: -400%; 
    } 
} 

Answer 1

FF에 대한 background-position-x을 모르는, 그는 단지 배경 위치에 대해 알고있다. 그래서 다음과 같이 작성할 수 있습니다 :

#process-section #process-idea.process .image-block { 
    background-position: -200% 0; 
}