Chrome의 JQuery는 배경 이미지를 찾을 수 없습니다

StackOverflow https://stackoverflow.com/questions/609168

  •  03-07-2019
  •  | 
  •  

문제

사용자가 클릭 할 때 비활성화되었음을 보여주기 위해 배경을 변경하려는 버튼이 있습니다. IE/FF에서는 잘 작동하지만 Chrome에서는 배경 이미지를 찾을 수없고 배경을 사용하지 않는 것 같습니다.

alt text

jQuery 1.2.6에서 간단한 CSS를하고 있습니다.

$(".CheckoutBt").css("background-image", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif)");
도움이 되었습니까?

해결책

Ok 문제를 추적했습니다. TVANFOSSON이 말했듯이 WebKit이 이미지를 다운로드하지 않기 때문입니다. 이 문제를 해결하기 위해 나는 냉정한 클래스에 두 이미지를 모두로드합니다.

<style>
.unclicked {
 background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
 background-image: url('/Portals/_default/images/buttons/checkout-end.gif');
}
.clicked {
   background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
}
</style>

다른 팁

내가 이것을 다루는 방법은 수업입니다. 각 버튼 상태에 대해 별도의 CSS 클래스가있는 다음 jQuery를 사용하여 버튼 클래스를 변경하십시오. 이렇게하면 클래스를 설정할 때 모든 이미지가 실제로 다운로드되고 사용할 수 있도록합니다.이 곳은 Chrome이 실패했다고 생각합니다 (아마도 모든 WebKit 브라우저가이를 수행 할 것입니다).

<style>
.unclicked {
 ...
}
.unclicked :hover {
 ...
}
.clicked {
   background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
}
</style>
...
$(".CheckoutBt").click( function() {
    $(this).removeClass('unclicked').addClass('clicked');
    ...do what ever action...
});

"Background-Image"사용 "BaggubuteImage"대신

전체 "배경", "url (/portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 0 No-Repeat를 시도하십시오.

또한 모든 배경 이미지를 단일 이미지로 통합하는 것이 좋습니다. 이와 같이. 그런 다음 사용합니다 background-position 롤오버 효과를 수행하기 위해 오프셋. 매우 긴 버튼 이미지 (정상 및 롤오버 상태와 함께)를 만들어이 기술을 더욱 악용하고 왼쪽과 오른쪽을 정렬하여 '슬라이딩 도어'를 생성합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top