如何使背景图像从灰度淡入淡出颜色？

我目前有一个带有彩色背景图像的Bootstrap网页。我希望图像从灰度开始，然后在页面加载（不悬停）时逐渐淡入颜色。如何使背景图像从灰度淡入淡出颜色？

用CSS/HTML做这件事的最好方法是什么？

2016-07-14 user6436986

第一篇文章？欢迎来到StackOverflow。看看[使用CSS将彩色图像转换为黑白...]（http://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS）然后告诉我们你的'已经尝试过。提示：JSFiddle真的是显示一小段代码的最佳工具。容易有人帮助你... – zipzit

你不能这样做在CSS中的背景图像。 –

@Paulie_D什么是背景，图像，真的吗？好的，所以我们有一个带有图像的div和一个低Z指数。这对你有用吗？ – zipzit

您可以通过CSS关键帧动画来实现这一点。

您可能希望在以下扩展：

@keyframes greyscale-fade-in { 
    0% { -webkit-filter: grayscale(100%); } 
    100% { -webkit-filter: grayscale(0%); } 
} 


.image-selector { 
    animation: greyscale-fade-in 1s ease-in forwards; 
}

关键帧控制如何让图像适合作为页面加载。

的animation价值需要被告知哪些关键帧使用（greyscale-fade-in），你要多久动画将持续（1s为1秒），你想（ease-in）什么时间过渡。

forwards参数告诉动画仅从0％到100％运行，而不是从100％回到0％。

动画规则需要应用到以图像为目标的选择器，因此请确保您的<img>或包装<div>有一个您可以定位的类。

有关动画的更多信息，您应该阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/animation

来源

2016-07-14 18:58:57

这是一个很好的解决方案！ - 试图自己想出一个解决方案，然后测试你的出来，它效果很好。做一个小提琴，如果任何人都好奇https://jsfiddle.net/26zpq6vc/6/，但充分信任你的那个 – HisPowerLevelIsOver9000

非常感谢！ –

如何使背景图像从灰度淡入淡出颜色？

回答

相关问题