翻转图像变暗 [英] Darken image on rollover
本文介绍了翻转图像变暗的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个需要在翻转时变暗的图像列表。我真的很喜欢这样做没有a肿的css翻转技术，随时花在了photoshop让我很高兴。我有一部分的方式在那里，但有些事情出了问题。这是现场直播：
I have a list of images that need to darken on rollover. I would REALLY love to do this without a bloated css rollover technique as anytime spent out of photoshop makes me very happy. I got part of the way there but something is going wrong. Here it is live:
http://daveywhitney.com/ dark /
CODE：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Darken</title>
<style type="text/css">
#topnav {
float:left;
margin:22px 0 0 50px;
list-style:none;
}
.kitchy {
background-color:#000000;
width:112px;
height:203px;
}
#topnav a:hover{
opacity:.6;
}
#topnav li {
display:inline;
}
</style>
</head>
<body>
<ul id="topnav">
<li class="kitchy"><a href="#"><img src="img/kitch.jpg" /></a></li>
<li><img src="img/deck_small.jpg" /></li>
<li><img src="img/door_small.jpg" /></li>
<li><img src="img/lumber_small.jpg" /></li>
<li><img src="img/tools_small.jpg" /></li>
<li><img src="img/paint_small.jpg" /></li>
</ul>
</body>
</html>
推荐答案
如何：
JSFiddle
我改变了什么：
< ul> c $ c>< li> 到< div> 。已将 kitchy 类添加到所有菜单项，
<ul> and <li> to <div>. Added kitchy class to all menu items,
已更改此CSS：
#topnav {
float:left;
margin:22px 0 0 50px;
list-style:none;
}
.kitchy {
background: #000;
width:112px;
height:103px;
float:left;
margin:5px; /*Optional*/
}
#topnav a:hover{
opacity:.5;
}
这篇关于翻转图像变暗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
