Css 加载页面后背景图像从灰色变为彩色

我试图得到一个效果的褪色背景（一次）从灰度到颜色后，页面加载。我想出了这个，但不起作用：

<style>
    body {
        background: #ffffff url('http://www.itgeared.com/images/content/1481-1.jpg') no-repeat top;
        background-attachment: fixed; 
        animation: filter-animation 8s;
        -webkit-animation: filter-animation 8s;            
    }    
    .content {height:2000px;}

@keyframes filter-animation {
   0% ,75%{
   filter: grayscale(1);
}

 100% {
  filter: grayscale(0);
  }

}


@-webkit-keyframes filter-animation {
 0%, 75% {
   -webkit-filter: grayscale(1);
 }

 100% {
   -webkit-filter: grayscale(0);
 }

}   

身体{
背景：#ffffff url（'http://www.itgeared.com/images/content/1481-1.jpg“）无重复顶部；
背景附件：固定；
动画：过滤动画8s；
-webkit动画：过滤动画8s；
}    
.content{高度：2000px；}
@关键帧过滤器动画{
0% ,75%{
过滤器：灰度（1）；
}
100% {
过滤器：灰度（0）；
}
}
@-webkit关键帧过滤器动画{
0%, 75% {
-webkit过滤器：灰度（1）；
}
100% {
-webkit过滤器：灰度（0）；
}
}   

和html：

<div class="content">
    . <br/>. <br/>. <br/>. <br/>
</div>

. 

我正在努力实现这样的目标：

这是

---

谢谢更新：

当您在移动设备或平板电脑中时，您可能希望图像具有不同的布局，以便可以在CSS文档末尾添加此媒体查询

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
    .img {
        position: fixed;
        width: auto;
        height:80%;
        animation: filter-animation 8s;
        -webkit-animation: filter-animation 8s;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

因此，当屏幕宽度小于

768px

时，新的CSS类

img

将覆盖旧的CSS类

注意：请根据您的需要使用此CSS。但此查询适用于手机和平板电脑，只需稍加调整

旧答案：

不要使用不能与上述CSS一起使用的

背景图像

，而是尝试为您的页面使用一个固定位置的图像，这基本上做了相同的事情。下面是执行此操作的代码

注意：需要调整图像的位置以满足您的要求。你可以选择

高度：100%；宽度：自动

或高度：自动；宽度：100%，需要根据您的需要进行调整。

html，
身体{
高度：自动；
宽度：100%；
边际：0px；
}
.img{
位置：固定；
顶部：0px；
左：0px；
右：0px；
底部：0px；
宽度：100%；
动画：过滤动画8s；
-webkit动画：过滤动画8s；
}
.内容{
高度：2000px；
}
@关键帧过滤器动画{
0%,
75% {
过滤器：灰度（1）；
}
100% {
过滤器：灰度（0）；
}
}
@-webkit关键帧过滤器动画{
0%,
75% {
-webkit过滤器：灰度（1）；
}
100% {
-webkit过滤器：灰度（0）；
}
}

.

。

。

。

在这里阅读更多内容，这是一个答案-谢谢，但我不想重建整个页面（我只从中复制了基本内容）。下面的答案解决了这个问题。@NaurenMurali谢谢。还有一个问题。如何使背景图像水平居中？我在bootstrap上这样做，图像的主要内容在中间，所以当我使用mobile时，它会显示图像的左侧，而不是图像的中心。如何将图像居中？@PiotrCiszewski请给我一些时间！我会提供resolution@PiotrCiszewski感谢您的等待，我已经更新了我的答案与媒体查询为中心的移动和平板电脑，请使用这个CSS类，并调整它，以满足您的需要，希望这有助于您完全解决这个问题！