过渡背景图像答案

【问题标题】：Transition Background-Image过渡背景图像
【发布时间】：2013-08-13 08:03:14
【问题描述】：

我是网络编程领域的新手，但我正在尝试开发一个网页，该网页会在页面从黑白版本的照片转换为照片的普通彩色版本时加载。

在尝试了很多不同的东西之后，我能做的最好的就是让彩色版本立即出现。我也尝试过使用 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;
}

如果有办法使用这种格式从黑白平滑过渡到彩色，请告诉我。谢谢:)

【问题讨论】：

标签： html css background transition smooth

【解决方案1】：

我认为不使用任何饱和插件等最简单的解决方案是将带有彩色图像和零不透明度的 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;
}

【讨论】：

【解决方案2】：

如果我明白你想要什么，你可以尝试使用例如

-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;

像这样：http://jsfiddle.net/guillaumek/CcNHv/

【讨论】：

【解决方案3】：

看看这个。 JSFIDDLE

它使用两个图像，一个是黑色的，一个是黑色的，另一个是彩色的。彩色图像隐藏在黑白图像后面。

然后单击黑白图像淡出以显示彩色图像。

检查一下。

HTML：

<div id="color">
    <div id="blackAndWhite"></div>
</div>

jQuery:

$("#blackAndWhite").click(function(){
$(this).fadeOut(5000);
});

希望对你有帮助！

【讨论】：