注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

图片hover切换:灰度、透明度。[回到顶部]  

2013-10-03 09:23:32|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

效果自己测试。
说明:鼠标移动上去会显示原图,移开就显示透明或灰度图。

filter滤镜貌似只有IE支持。

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#wrap{
width:600px;
margin:0 auto;

min-height:1200px;
border:#444 1px solid; padding:30px;}


/* 图片灰度化,0是原图,1是完全灰度图。*/
img.grey {
-moz-filter:grayscale(0.8);
-webkit-filter:grayscale(0.8);
-ms-filter:grayscale(0.8);
-o-filter:grayscale(0.8);
}



/* 图片透明化,
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。
opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。
x 能够取的值从 0 到 100。值越小,越透明。
*/
img{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}



/* 仅在IE下有效。 */
img{
filter:gray
}


/* 返回顶部 */
#to_top { position:fixed; bottom:50px; right:50px;
height:47px; width:47px;
background:url(./images/top01.png);
}
#to_top:hover {background:url(./images/top02.png);}


</style>
<head>

<body>


<div id=wrap>

<img class=grey src="./images/top01.png" />
<img src="./images/top01.png" />


</div>


<a title="返回顶部" id="to_top" href="#"></a>
</body></html>


图片hover切换:灰度、透明度。置顶。 - 米欧studio - 米欧光影工作室
top01.png

 
图片hover切换:灰度、透明度。置顶。 - 米欧studio - 米欧光影工作室
 top02.png



/*最简回顶部代码

1.把本代码贴到html页面body内;

2.在此页面所在目录新建images文件夹,把以上两个图放入;

*/


<style>
#to_top { position:fixed; bottom:50px; right:50px;
height:47px; width:47px; background:url(./images/top01.png);}
#to_top:hover {background:url(./images/top02.png);}
</style>
<a title="返回顶部" id="to_top" href="#"></a>




refer

  评论这张
 
阅读(440)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017