加载页面后将背景图像从灰色淡化为彩色

Question

我试图在页面加载后获得背景从灰度淡化到彩色的效果（一次）。我想到了这个，但没有用：

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

}

和html：

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

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

这里是jsfiddle

谢谢

Answer 1

更新：

您可能希望在使用手机或平板电脑时为图像设置不同的布局，以便可以在 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 class img将覆盖旧的。

注意：请尝试使用此 CSS 以满足您的需要。但此查询适用于手机和平板电脑，只需稍作调整！

旧答案：

不要使用不能与上述 CSS 一起使用的 background-image，而是尝试为您的页面使用固定位置的图像，这基本上做同样的事情。这是执行此操作的代码。

注意：需要根据您的要求调整图片的位置。就像你可以有 height:100%;width:auto 或 height:auto;width:100%，这需要根据你的需要进行调整。

html,
body {
  height: auto;
  width: 100%;
  margin: 0px;
}

.img {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  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);
  }
}

<img class="img" src="http://www.itgeared.com/images/content/1481-1.jpg" />
<div class="content">
  .
  <br/>.
  <br/>.
  <br/>.
  <br/>
</div>

加载页面后将背景图像从灰色淡化为彩色

Fading background image from grey to colour after loading a page

css

transition

background-image

fading