用上了,觉得不错,分享一下
核心代码:
.opacity50 {
opacity:0.50; /* firefox, opera, safari, chrome */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /* IE 8 */
filter:alpha(opacity=50); /* IE 4, 5, 6 and 7 */
zoom:1 /* so the element "hasLayout"
/* or, to trigger "hasLayout" set a width or height */
}
原文地址:http://www.itnewb.com/tutorial/Cross-Browser-CSS-Opacity-and-the-JavaScript-Fade-Fading-Effect
使用twitter bootstrap的同学,可以给缩略图组件加上这个效果了,感觉很不错啊。
.thumbnail img {
opacity: 0.50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter: alpha(opacity=50);
zoom: 1
}
.thumbnail img:hover {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
filter: alpha(opacity=100);
zoom: 1
}