CSS:how 我制作黑白图像，彩色图像吗？

Question

我在一个网站上看到了一个效果，我尝试自己编写代码并且我可以。你可以在这里看到它： click to see the effect

正如你所看到的，黑白图像变成了彩色，但我只是用了一个技巧来做 that.the 代码将黑白图像的高度设置为 0px，而彩色图像隐藏在它后面，所以它当我们将鼠标悬停在黑白图像上时显示。我的问题是有没有简单的方法可以做同样的事情？或者稍微改变一下，例如颜色可以从图像顶部掉落吗？这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bgimg {
    background-image: url("1.png");
background-repeat:no-repeat;
height:190px;
-webkit-transition:0.5s;

    }
    .main{
    height:190px;

    -webkit-transition:0.5s;

    background-image: url("2.png");
background-repeat:no-repeat;
    }
    div:hover .bgimg{
    height:0px;
    }
</style>


</head>
<body>

<div class="main">
<div class="bgimg">

</div>
</div>

</body>
</html>

Answer 1

对我来说看起来很简单！如果你想让颜色从顶部来，只需交换图像源和高度，这样彩色图像向下扩展而不是黑白图像向上收缩:

.main {
    height:190px;
    -webkit-transition:0.5s;
    background-image: url("http://kh-salamat-sk.ir/sweep/1.png");
    background-repeat:no-repeat;
}

.bgimg {
    background-image: url("http://kh-salamat-sk.ir/sweep/2.png");
    background-repeat:no-repeat;
    height:0px;
    -webkit-transition:0.5s;
}

.main:hover .bgimg {
    height:190px;
}

<div class="main">
    <div class="bgimg"></div>
</div>

显然，您可以使用相同的技巧从左侧和右侧执行相同的操作。

如果你想做更复杂的过渡，比如棋盘淡入淡出，那么单独 CSS 可能是不够的（尽管你可以用 gradients) and you will need Javascript and probably canvas.

做一些事情

CSS:how 我制作黑白图像，彩色图像吗？

CSS:how do i make a black and white image,colorful?

html

css

hover

grayscale