[html] background-position-y가 Firefox (CSS를 통해)에서 작동하지 않습니까?
내 코드에서는 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;
}