CSS 이미지와 일치하도록 jquery의 이미지를 동적으로 변경하십시오.

Question

문제를 올바르게 설명하고 잘 알려 주시면 수정하겠습니다.

나는 정적 인 이미지 일 때 배경이 흐리게 보이고 작동하는데 문제가있는 슬라이드 메뉴가 만들어졌습니다. 슬라이드 쇼의 경우 문제가 있습니다.

이렇게하면 내가하려는 일에 대해 더 잘 이해할 수 있습니다. 당신이 빨간 버튼을 클릭하면

http://jsfiddle.net/djm3v/23/

은 슬라이드의 배경이 흐릿하게 보인다, 그러나 당신이 다음 또는 이전 버튼을 클릭하고 다른 슬라이드를 보여 주면, 흐린 이미지는 내가 필요로 동일하게 유지 슬라이드 이미지와 일치시킵니다.

다음은 내 jquery 코드입니다.

jQuery(document).ready(function($) { 
    $(".trigger-wrapper").click(function() { 
    $("#menu-wrapper-left").stop().animate({width: 'toggle'}); 
    $('#hero-container').css('background-image','url(http://dummyimage.com/600x400/000/fff.jpg)'); 
    return false; 
    }); 
}); 

중요한 라인이 슬라이드 메뉴가 다음 슬라이드 메뉴는 스타일 시트에 다음과 같은 CSS 이미지를 사용이 줄을 삭제하는 경우, 흐릿하게 사용하고있는 이미지입니다

$('#hero-container').css('background-image','url(http://dummyimage.com/600x400/000/fff.jpg)'); 

입니다. 그것은 단 하나의로 모두가 잘못

#hero-container { 
    background: url(http://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg) no-repeat 50% fixed; 
    background-size: cover; 
} 

어느 쪽이든, 그것은 선택 무엇을 슬라이드에 따라 슬라이드 쇼 이미지를 사용할 필요가 아래를 참조하십시오.

.hero li:nth-child(1) span { 
    background-image: url('http://dummyimage.com/600x400/000/fff.jpg'); 
} 
.hero li:nth-child(2) span { 
    background-image: url('http://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg'); 
} 

실무 예제가 도움이 될 수 있습니다.

Answer 1

귀하의 질문을 이해했습니다. jsfiddle 링크에서 동일한 html, javascript 및 css 파일을 사용하고 일부 수정을했습니다. 나는 CSS를 추가하고있다. 수정 한 부분과 jsfiddle 링크를 수정 한 부분이다.

CSS

#menu-wrapper-left { 
    height:100%; 
    width:300px; 
    position: fixed; 
    display: none; 
    background:white; 
    top:0; 
    opacity:0.5; 
    z-index:5; 
    box-shadow: 1px 1px 4px rgba(0,0,0,.3); 
    left:0px; 
} 

완성 된 데모는 주어진 jsfiddle 링크입니다.

http://jsfiddle.net/djm3v/34/