'배경 이미지'페이드 인/아웃

Question

이미지가 연속적으로 (루프) 페이드 인하거나 페이드 아웃 될 수 있도록 배경 이미지를 어떻게 변경합니까? 나는 div를 만들고 거기에 여러 이미지를 추가하려했지만 이미지가 배경 크기로 필요하기 때문에 작동하지 않는 것 같습니다 : 표지 및 중앙 위치. 나는 이것에 대한 질문을 전에 물어 보았지만이 일을 할 수는없는 것 같다.

#landing { 
    position: relative; 
    margin-top: 0px; 
    background-image:url('/images/blue.jpg'); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center; 
    background-color: black; 

} 

고마워요!

Answer 1

당신의 CSS에 height, width 및 z-index을 추가

#landing { 
    position: relative; 
    margin-top: 0px; 
    background:url('https://www.google.com/images/srpr/logo11w.png') no-repeat; 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center; 
    height:100px; 
    width:100px; 
    background-color: black; 
    z-Index:-1; 
} 

사용 setTimeout()가 및 페이드 아웃.

function FadeOut(){ 
    $('#landing').fadeOut(); 
} 

function FadeIn(){ 
    $('#landing').fadeIn(); 
} 

setTimeout(function(){FadeOut();}, 1000); 
setTimeout(function(){FadeIn();}, 1000); 

당신은 긴 시간 동안 내 및 배경 페이드를 만들기 위해 forloop에 setTimeout 기능을 추가 할 수 있습니다.

Answer 2

JSFiddle Demo은 또한 루프 또는 이미지의 배열을해야합니다; 페이드 아웃 (fade out) 할 때 이미지를 변경하려고합니다. 이 같은 :

Smooth image fade out, change src, and fade in with jquery

나는 그 당신을 도울 것입니다에서 살펴 본다 생각; 그 아주 간단합니다.

Answer 3

기본적으로 영상 효과는 배경 이미지에 적용되지 않으므로 추가 작업을해야합니다. 슬라이드 쇼를 수행하는 많은 jQuery 플러그인이 있습니다. 그들 모두는 두 개의 이미지 요소를 사용하고 효과를 내기 위해 하나를 퇴색시킴으로써 동일한 접근 방식을가집니다.

순수 CSS 및 브라우저 요구 사항에 따라 요소를 추가 할 필요가 없습니다. 이것은 두 이미지로만 작동합니다. JS Fiddle Demo

#landing { 
    position: relative; 
    border: 1px solid #666; 
    height: 10em; 
} 

#landing::before, #landing::after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    background-size: contain; 
} 

#landing::before { 
    background: #fff url(http://www.openclipart.org/people/Map2Map/Waveski_Rear.svg) no-repeat center; 
} 

#landing::after { 
    background: #fff url(http://www.openclipart.org/people/Map2Map/Waveski_Along_Wave.svg) no-repeat center; 
    animation: fadeWithDelay 2s infinite linear alternate; 
} 

@keyframes fadeWithDelay { 
    0% {opacity: 1;} 
    25% {opacity: 1;} 
    75% {opacity: 0;} 
    100% {opacity: 0;} 
} 

또한 heres는 또 다른 방법은 여러 이미지를 필요한 경우 그것은

JS Fiddle Demo

Answer 4

당신은 다음과 같은 뭔가를 비교적 쉽게 그렇게 할 수있는 동적 일 필요가 없었다 (working concept here at jsFiddle).

HTML : 나는 jsFiddle 코멘트에서 말하는 것처럼 당신이 #landing에 넣기 전에 그것으로 라인에서 다음 이미지를로드 할 수 있도록

<div id="dummyDiv"></div> 
<div id="landing"><div id="cover" class="hide"></div></div> 

, 당신이 dummyDiv이 필요합니다. 이 기능이 없으면 처음으로 이미지 배열을 반복하면서 로딩 시간에 직면하게됩니다.

CSS :

#dummyDiv { 
    position: inline; 
    height: 0; 
    width: 0; 
    margin: 0; 
    padding: 0; 
} 
#landing { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin-top: 0px; 
    background-image:url('http://placekitten.com/200/300'); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center; 
    background-color: black; 
    transition: background-image .5s; 
    z-index: -3; 

} 
#cover { 
    background: white; 
    opacity: .8; 
    transition: opacity .7s; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: -2; 
} 
#cover.hide { 
    opacity: 0; 
} 

자바 스크립트

var kittens = ["http://placekitten.com/200/300", "http://placekitten.com/400/301", "http://placekitten.com/200/305", "http://placekitten.com/200/308"] 

var currentKitten = 1; 
var lastKitten = 0; 

var changeUpTheKitten = function() { 
    lastKitten = currentKitten; 
    currentKitten = (++currentKitten < kittens.length) ? currentKitten : 0; 
    // we need to cache the image so it loads in smoothly as a bg on the real #landing div 
    $("#dummyDiv").css("background-image", "url("+kittens[currentKitten]+")"); 
    $("#cover").removeClass("hide"); 
    $("#landing").css("background-image", "url("+kittens[lastKitten]+")"); 
    // url("+kittens[lastKitten]+")" 
    setTimeout(function() { $("#cover").addClass("hide"); }, 700); 
}; 

var kittenChangeInterval = setInterval(changeUpTheKitten, 3000); 

숫자 놀이 주시기 바랍니다. 몇 가지 값을 조정하면 훨씬 다른 것처럼 보일 수 있습니다. 질문이 있으시면 언제든지 물어보십시오.

그냥 다음 단계를 수행 할 필요가 fadeIn 및 페이드 아웃 효과를

Answer 5

: 배경처럼 행동하는 사업부 1.Make

을 100 % 너비와 높이로에서 이미지의 src 태그를 넣어

<div id="mybody" class="av-row-40 bg-danger" style="width:80%;margin:auto;> 
    <img src="C:/Users/Naveen/Desktop/Images/2.jpg" style="width:100%;height:100%" id="myimage"> 
</div> 

$(document).ready(function){ 
     setInterval(function(){ 
      $("#myimage").fadeOut(1000); 
      setTimeout(function(){ 
       $("#myimage").fadeIn(1000); 
       if(index==5) index=0; 
       index++; 
       $("#myimage").attr("src",changeimages[index]); 
       /*alert(changeimages[index]);*/ 
      },1000); 
     },3000); 
    });