배경 위치 이미지 오버레이 (Mozilla/Chrome/Safari가 아닌 IE에서 작동)

Firefox, Google 크롬 및 Safari에서 다음 jquery background position 명령을 사용하여 배경 이미지 배치에 문제가 있습니다. 이 코드는 IE 8에서 올바르게 작동합니다.배경 위치 이미지 오버레이 (Mozilla/Chrome/Safari가 아닌 IE에서 작동)

$ ('# 요소') .css ({backgroundPosition : 'xpx ypx'});

원하는 효과는 화면의 오른쪽에서 왼쪽으로 이어지는 유체의 연속적인 흐름으로, 기본 페이지 내용 뒤에 희미 해집니다. 이것은 2 개의 유체 이미지를 사용하여 수행됩니다. 하나는 완전히 날카 롭고 다른 하나는 완전히 흐려집니다. 사용자가 창 크기를 조정할 때 jquery 함수는 흐리게 처리 된 이미지 (배경 이미지로 설정 됨)의 적절한 위치를 계산하고 backgroundposition css 속성을 편집합니다.

이미지의 x 위치는 창 크기를 기반으로 동적으로 계산되며 y 위치는 정적입니다. CSS가 올바르게 수정 된 것으로 보입니다 (가장 오른쪽 텍스트 상자에 배경 위치 표시가 있음). 그러나 오버레이를 시도하는 배경 이미지는 mozilla/chrome/safari에는 없습니다. 당신의 도움을

앤드류 당신이 일을해야하고 무엇

출처

2010-06-13 amm229

을 사전에

$(window).resize(function() { 
    // image positioning variables 
    var windowwidth = $(window).width(); 
    var imgwidth = $('#imgFluid').width(); 
    var offset = $('#divFluidBlur').offset(); 

    // calculate and implement position 
    blurPositionLeft = (windowwidth - imgwidth) - offset.left; 
    $('#divFluidBlur').css({ backgroundPosition: blurPositionLeft + 'px' + ' 30px' }); 

    // debug: display actual css Background Position of element to text box 
    $("#txtActualBackgroundpos").val(document.getElementById ("divFluidBlur").style.backgroundPosition); }

감사 : JScript를 아래의 코드를 참조하십시오. 어쨌든 조금 깔끔한 버전을 사용해보십시오. $ ('# divFluidBlur'). css ('background-position', blurPositionLeft + 'px'+ '30px'); 그리고 방화범이 끌리는 다른 스타일의 값을 일시적으로 사용 불가능하게하거나 변경하기 위해 방화 광을 사용할 수도 있습니다.

문제의 온라인 예를 설명해 주시겠습니까?

출처

2010-06-13 23:46:26

죄송합니다. 실제 사례를 호스팅 할 곳이 없습니다. 나는 문제를 더 잘 설명하는 데 도움이되는 정보를 추가했다. -Andrew – amm229

X 값에 대한 경고()를 통해 올바른지 확인 했습니까? –

예 실제로 텍스트 상자를 사용하여 CSS 속성이 업데이트되고 있는지 확인했습니다. 모든 브라우저에서 올바르게 업데이트되고 있습니다. IE에서는 정확하게 표시되지만 firefox, chrome 또는 safari에서는 표시되지 않습니다. – amm229

배경 위치 이미지 오버레이 (Mozilla/Chrome/Safari가 아닌 IE에서 작동)

답변

관련 문제