CSS DIV 위치 오버레이 이미지는

여기 볼 수있는 간단한 MVC 4 사이트를 만들 언급했다. JQuery이CSS DIV 위치 오버레이 이미지는

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    $('.fadein img:gt(0)').hide(); 
    setInterval(function() { 
     $('.fadein :first-child').fadeOut() 
      .next('img').fadeIn() 
      .end().appendTo('.fadein'); 
    }, 
     3000); 
}); 
</script>

은 다음 내 index.cshtml에서 마크 업이 될 때 :

것은 내가 저자 여기에서 초기 JS를 사용하고 이미지를 대체하려면

<div id="intro"> 
    <p> 
    Don't let memories fade - preserve them for generations to come.<br /> 
    Yorkshire Image Scanning can create perfect digital copies of your photographs, stored on DVD or USB memory stick. 
    The access the digital images simply insert into a DVD player and a slideshow will start to run. 
    Alternatively, the images can be copied to your PC, iPad, smartphone etc and backed up using any normal method such as external hard disk or DVD copies or cloud storage. 
    Of course, digital images are so much easier to share than old photographs. Upload them to facebook and let distant friends share your memories! 
    </p> 
</div> 
<div class="fadein"> 
    <img src="~/Content/img/old_photos/1.jpg" alt="Old Photos" /> 
    <img src="~/Content/img/old_photos/2.jpg" alt="Old Photos" /> 
    <img src="~/Content/img/old_photos/3.jpg" alt="Old Photos" /> 
    <img src="~/Content/img/old_photos/4.jpg" alt="Old Photos" /> 
    <img src="~/Content/img/old_photos/5.jpg" alt="Old Photos" /> 
</div>

다음과 같이 CSS는 다음과 같습니다

#intro { 
    float: left; 
    width: 50%; 
} 

.fadein { width:300px; height:300px; } 
.fadein img { position:absolute; left:0; top:0; }

누구든지 내가해야 할 일을 조언 해 주실 수 있습니까? 나이? .fadin img가없는 한 그것이 보인다 : 절대적으로 다음 jQuery가 다음 이미지로 넘어갈 때마다 동시에 각 이미지를 보게된다. 모든 이미지를 이전 div에 상대적인 위치로 설정하여 각 이미지가 이전 이미지를 오버레이하는 방법을 모르겠습니다.

출처

2013-07-03 Rob Bowman

와 함께 작동합니다. – DickieBoy

귀하의 .fadein을 상대방으로 만들고 올바르게 띄우면 원하는 결과를 얻을 수 있습니다.

편집 : 감사합니다 일리아 Streltsyn 에 당신은 당신의 .fadein 사업부에 margin-left: auto를 사용하여 더 나을 것입니다. 이렇게하면 수레를 사용할 때 부모가 무너지는 것을 방지 할 수 있습니다.

출처

2013-07-03 09:16:57

div를 오른쪽으로 이동하는 또 다른 옵션은 margin-left : auto를 설정하는 것입니다. –

사실, margin-left는 부모 div가 붕괴되는 것을 피할 수 있기 때문에 요소를 떠 다니는 것보다 낫습니다. - 나는 그것에 대해 생각하지 않았습니다. –

여러분, 고마워요. 완벽하게 작동합니다. 다음은 업데이트 된 CSS입니다. fadein {position : relative; margin-left : 자동; 너비 : 300px; 높이 : 300px; } .fadein img {위치 : 절대; 왼쪽 : 0; 상단 : 0; } –

귀하의 .fadein 솔루션 대답은 당신이`.fadein` 위치를 메이크업을 설명하고 작동 방법을 정확히 position:relative;

출처

2013-07-03 09:18:35

CSS DIV 위치 오버레이 이미지는

답변

관련 문제