Question

如何使图像变暗，然后覆盖像here这样的png图像？

这是我目前的代码：

<!DOCTYPE html>
<html>
<head>
<title>JQuery Effect</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=3.2'></script>
</head>
<body>
<img src="http://i25.lulzimg.com/7cd053.jpg"/>
</body>
</html>

Answer 1

在图像容器上放置黑色背景色，并在悬停时淡出图像。

jquery（例如）看起来像这样：

$('.fadable-image').each(function(){
$(this).hover(function(){
    $(this).animate({opacity: 0.5}, 250, 'swing');
},function(){
    $(this).animate({opacity: 1}, 250, 'swing');
});
});

http://api.jquery.com/animate/

http://api.jquery.com/hover/

也可以使用CSS伪类，但是没有效果。

Answer 2

我已将代码直接从网站中删除，以便您了解它是如何完成的。 +图像没有显示，因为我不知道img文件的路径。

See here

覆盖png图像并在悬停时使图像变暗

2 个答案: