微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – 翻转时使图像变暗

我有一个需要在翻滚时变暗的图像列表.我真的很乐意这样做,没有臃肿的CSS翻转技术,因为任何时候花在Photoshop上都会让我很开心.我有一部分路在那里,但出了点问题.这是现场:

http://daveywhitney.com/dark/

码:

<!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>和< li>到< div>.为所有菜单添加了kitchy类,

改变了这个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;
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐