使用CSS查看时如何淡入图像

Question

当用户使用纯粹的CSS（而非主要是CSS）将图像滚动到视图中时，有没有办法淡入图像？

我显示了一堆图像，我希望这些图像在向下滚动时显示效果很好。

Answer 1

如果您希望图像仅在用户可以看到它时淡入（在滚动页面之后），则不能仅使用CSS。要使用opacity和transition对淡入淡出效果进行淡入/淡出效果。的 Example

img{
    opacity: 0.6;
    transition: all 1s;
}
img:hover{
    opacity: 1.0;
}

如果你想使用JQuery，那就有可能。请参阅 this exmaple 。

Answer 2

img
{
opacity:0.4;
}
img:hover
{
opacity:1.0;
}

透明度的CSS3属性是不透明度。不透明度属性可以取0.0到1.0之间的值     较低的值使元素更透明。

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

检查此链接，对您有很大帮助： -     http://designshack.net/?p=36895