過渡背景圖片
[英]Transition Background-Image
問題描述
我是Web編程領域的新手，但是我正在嘗試開發一個網頁，該網頁在頁面加載時將從黑白版本的照片過渡到普通彩色版本的照片。
在嘗試了許多不同的方法之后，我能做的最好的就是使彩色版本立即出現。 我也嘗試使用JQuery，但是由於某種原因，我無法正確加載頁面。 它停留在黑白版本上，而不是過渡到普通版本。
HTML如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'>
<title>UCLA Wushu - Home</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("html").animate({'background' : 'url(images/home_background.jpg) no-repeat center center fixed'}, 'slow');
});
</script>
</head>
<body>
<div id="container">
<div id="middleBar">
<strong>
<a href="index.html">My Portal</a>
</strong>
<div id="enter"><a href="announcements.html">Enter</a></div>
</div>
</div>
</body>
</html>
相關的CSS如下（我復制並粘貼以將背景圖像有效地拉伸到瀏覽器中）：
@charset "UTF-8";
/* CSS Document */
html {
background: url(images/home_background_bw.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
請讓我知道是否有一種方法可以使用這種格式從黑白平滑過渡到彩色。 謝謝 ：）
3 個解決方案
解決方案1
0 2013-08-13 08:28:27
我認為最簡單的解決方案，不使用任何飽和度插件等，是在body標簽之后放置帶有彩色圖像和零不透明度的div，然后將該div的不透明度動畫化為100％。
HTML的一部分：
...
<title>UCLA Wushu - Home</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#colored-bg").animate({
opacity: 100
}, 'slow');
});
</script>
</head>
<body>
<div id="colored-bg"></div>
<div id="container">
<div id="middleBar">
...
CSS：
#colored-bg {
background: url(images/home_background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
filter: ~"alpha(opacity=@{0})"; // IE
// following will strecth the element from corner to corner
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
解決方案2
0 2013-08-13 08:32:45
如果我了解您的需求，可以嘗試使用
-webkit-transition: background-color 2s linear;
-moz-transition: background-color 2s linear;
-ms-transition: background-color 2s linear;
-o-transition: background-color 2s linear;
transition: background-color 2s linear;
解決方案3
0 2013-08-13 09:28:27
看一下這個。 JSFIDDLE
它使用兩個圖像，一個是黑色，而另一個是彩色。 彩色圖像隱藏在黑白圖像的后面。
然后單擊，淡出黑白圖像以顯示彩色圖像。
看看這個。
HTML：
<div id="color">
<div id="blackAndWhite"></div>
</div>
jQuery的：
$("#blackAndWhite").click(function(){
$(this).fadeOut(5000);
});
希望能幫助到你！
背景圖像過渡部分
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.