[html] background-position-y가 Firefox (CSS를 통해)에서 작동하지 않습니까?

Program / 글쓴이

내 코드에서는 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;
}