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

因此，当屏幕宽度小于img时，新的CSS类768px将覆盖旧的类。{/ p>

注意：请使用此CSS来满足您的需求。但是此查询适用于移动设备和平板电脑，只需稍作调整即可！

旧答案：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

在加载页面后退色的背景图像从灰色到颜色

1 个答案: