我是网络编程世界的新手，但我正在尝试开发一个网页，当页面打开时，该网页将从照片的黑白版本过渡到照片的正常颜色版本负载。
在尝试了很多不同的东西之后，我能做的最好的就是让彩色版本立即出现。我也试过使用 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如下(我复制粘贴的目的是为了将背景图片有效拉伸(stretch)到浏览器中):
@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;
}
如果有一种方法可以使用这种格式从黑白平滑过渡到彩色，请告诉我。谢谢:)
最佳答案
我认为最简单的解决方案是在不使用任何饱和度插件等的情况下，将带有彩色图像和零不透明度的 div 紧跟在 body 标签之后，然后将该 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;
}
关于html - 过渡背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18203732/