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

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