Html CSS：我如何制作黑白图像，彩色的？_Html_Css_Hover_Grayscale

Html CSS：我如何制作黑白图像，彩色的？

html css

Html CSS：我如何制作黑白图像，彩色的？,html,css,hover,grayscale,Html,Css,Hover,Grayscale,我在一个网站上看到了一个效果，我试着自己写代码，我可以。你可以在这里看到它：正如你所看到的，黑白图像变得五颜六色，但我只使用了一个技巧来做到这一点。代码将黑白图像的高度设置为0px，而彩色图像隐藏在其后面，因此当我们在黑白图像上悬停时，它会显示出来。我的问题是，有没有简单的方法来做同样的事情？或者稍微更改一下，例如，颜色是否可以从图像顶部掉落？这是我的密码： <!DOCTYPE html> <html> <head> <style type=

我在一个网站上看到了一个效果，我试着自己写代码，我可以。你可以在这里看到它：

正如你所看到的，黑白图像变得五颜六色，但我只使用了一个技巧来做到这一点。代码将黑白图像的高度设置为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>


.bgimg{
背景图片：url（“1.png”）；
背景重复：无重复；
高度：190px；
-webkit转换：0.5s；
}
梅因先生{
高度：190px；
-webkit转换：0.5s；
背景图片：url（“2.png”）；
背景重复：无重复；
}
div:hover.bgimg{
高度：0px；
}

这对我来说很简单，就像你拥有的一样！如果您希望颜色来自顶部，只需交换图像源和高度，使彩色图像向下展开，而不是黑白图像向上收缩：

.main{
高度：190px；
-webkit转换：0.5s；
背景图像：url（“http://kh-salamat-sk.ir/sweep/1.png");
背景重复：无重复；
}
.bgimg{
背景图像：url（“http://kh-salamat-sk.ir/sweep/2.png");
背景重复：无重复；
高度：0px；
-webkit转换：0.5s；
}
.main:hover.bgimg{
高度：190px；
}