如何使用背景圖像進行淡入淡出過渡
[英]How can I make a fade transition with the background images
問題描述
我有5個按鈕，當我通過指針或其中的一些按鈕時，我想更改背景圖像但具有淡入淡出效果。
HTML：
<body>
<div id="content" class="row">
<div class="large-4 center columns ">
<a id="column1" class="button expand" href="http://www.page1.com">WEB 1</a>
</div>
<div class="large-4 center columns">
<a id="column2" class="button expand" href="http://www.page2.com">WEB 2</a>
</div>
<div class="large-4 center columns">
<a id="columna3" class="button expand" href="http://www.page3.com">WEB 3</a>
</div>
<div class="large-4 large-offset-2 center columns">
<a id="columna4" class="button expand" href="http://www.page4.com">WEB 4</a>
</div>
<div class="large-4 center columns end">
<a id="columna5" class="button expand" href="http://www.page5.com">WEB 5</a>
</div>
</div>
</body>
jQuery的：
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
$("#column1").mouseover(function(){
$("body").css('background-image', 'url("img/dib1.jpg")');
});
$("#column2").mouseover(function(){
$("body").css('background-image', 'url("img/dib2.jpg")');
});
$("#column3").mouseover(function(){
$("body").css('background-image', 'url("img/dib3.jpg")');
});
$("#columna4").mouseover(function(){
$("body").css('background-image', 'url("img/dib4.jpeg")');
});
$("#column5").mouseover(function(){
$("body").css('background-image', 'url("img/dib5.jpg")');
});
</script>
問題是當更改圖像時，是如此之快，因為我要設置淡入淡出過渡，嘗試緩慢放置淡入淡出，但由於使用“ body”作為選擇器，所以消失了所有內容。
5 個解決方案
解決方案1
1 已采納 2014-04-11 15:41:47
這是我制作的一個小模型。 它只是一個基礎，但應該易於修改。
HTML：
<div id="content" class="row">
<div class="large-4 center columns ">
<a id="column1" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page1.com">WEB 1</a>
</div>
<div class="large-4 center columns">
<a id="column2" class="button expand" data-bg="http://www.psdgraphics.com/file/abstract-background.jpg" href="http://www.page2.com">WEB 2</a>
</div>
<div class="large-4 center columns">
<a id="columna3" class="button expand" data-bg="http://wallpapergrab.com/wp-content/uploads/2014/03/start-3d-background-wallpapers.jpg" href="http://www.page3.com">WEB 3</a>
</div>
<div class="large-4 large-offset-2 center columns">
<a id="columna4" class="button expand" data-bg="http://sciencelakes.com/data_images/out/26/8856597-daisies-green-background.jpg" href="http://www.page4.com">WEB 4</a>
</div>
<div class="large-4 center columns end">
<a id="columna5" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page5.com">WEB 5</a>
</div>
</div>
<div class="bg1"></div>
<div class="bg2"></div>
jQuery的：
$('.bg1, .bg2').height( $(window).height() );
$('.button').hover(function(){
var bgImage = $(this).data('bg');
if( $('.bg1').is(':visible') ){
$('.bg2').css('background-image', 'url(' + bgImage + ')');
$('.bg1').fadeOut(200, function(){
$('.bg2').fadeIn(200);
});
} else {
$('.bg1').css('background-image', 'url(' + bgImage + ')');
$('.bg2').fadeOut(200, function(){
$('.bg1').fadeIn(200);
});
}
});
解決方案2
0 2014-04-11 15:22:14
使用絕對元素並為其添加背景。 像這樣做：
<body>
<div id="bg"></div>
和樣式：
#bg {
position: fixed;
background: url(xyz.com);
width: 100%;
height: 100%;
top:0;
left:0;
z-index:-1; /* to place it behind body elements */
}
並遵循相同的技巧。 ：d
解決方案3
0 2014-04-11 15:30:53
CSS3是最簡單的方法。 您只需要像以前一樣在JavaScript中重新分配圖像，然后將其放在body標簽中即可為您完成其余工作。 請務必按時滿足您的需求。 免責聲明：此過渡在IE 10之前的版本中無效。
body {
transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;
}
解決方案4
0 2014-04-11 15:35:01
不幸的是，目前“簡單”的CSS無法做到這一點。
但是，您可以使用position: relative的容器（您的網頁），並將主div放置在其中， position: absolute ， top: 0; left: 0 top: 0; left: 0 。 然后添加與此div相同的級別：
<img src="img/dib1.jpg" class="bg-img active" />
<img src="img/dib2.jpg" class="bg-img" />
<img src="img/dib3.jpg" class="bg-img" />
<img src="img/dib4.jpg" class="bg-img" />
<img src="img/dib5.jpg" class="bg-img" />
在您的CSS中：
img.bg-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms ease-out; /* could be another duration / transition effect */
-webkit-transition: opacity 500ms ease-out;
-moz-transition: opacity 500ms ease-out;
-ms-transition: opacity 500ms ease-out;
-o-transition: opacity 500ms ease-out;
}
img.bg-img.active {
opacity: 1;
}
然后，在您的代碼中，而不是更改“ body”的background-image屬性，而是更改所需圖像的類，然后添加/刪除active 。
解決方案5
0 2014-04-11 15:55:59
您可以使用CSS 3 Transition屬性。 例如，在樣式表中定義類，如下所示：
.backgroundChanged
{
background-image: your image;
transition-property:background-image;
transition-duration: 0.3s;
transition-timing-function: linear;
}
然后在需要時以編程方式在javascript中應用此類。 希望這可以幫助。
如何使用innerHTML平滑地進行文本過渡，並在更改時淡入/淡出？
[英]How can I make a text transition with innerHTML smooth, with a fade in/out when it changes?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.