Question

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

你可以看到黑白图像变得丰富多彩，但我只用了一个技巧来做到这一点。代码将黑白图像的高度设置为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

你拥有它看起来很简单！如果您希望颜色来自顶部，只需交换图像源和高度，因此彩色图像向下扩展而不是b＆amp; w图像缩小：

.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做一些事情）并且你需要Javascript而且可能{{3} }。

CSS：我如何制作黑白图像，色彩鲜艳？

1 个答案: