网络建站知识

精准传达 • 价值共享

洞悉互联网前沿资讯，探寻网站营销规律

网站建设 > 网站建设 > 网络建站知识 >

查看其它板块

利用Css3filter(滤镜) 属性将图片变灰色鼠标放上去恢复变色

作者：狐灵科技 | 2020-02-06 20:22 |点击：

filter 属性定义了元素(通常是<img>)的可视效果，例如图片的模糊、饱和度、灰度等……狐灵小编感觉功能很强大

这里只把图片变灰色的效果给大家参考下  其实filter 还有很多特效  


现在规范中支持的效果有：

  • grayscale 灰度               值为0-1之间的小数 
  • sepia 褐色　　　　　　   值为0-1之间的小数
  • saturate 饱和度　　　　 值为num
  • hue-rotate 色相旋转　　值为angle
  • invert 反色　　　　　　  值为0-1之间的小数
  • opacity 透明度　　　　　值为0-1之间的小数
  • brightness 亮度　　　　 值为0-1之间的小数
  • contrast 对比度　　　　 值为num
  • blur 模糊　　　　　　     值为length
  • drop-shadow 阴影

用法是标准的CSS写法，如：

-webkit-filter: blur(2px);


我试着写了几个小效果，大家可以对比着看一下：

　　　　　　     无效果   -webkit-filter:none;

 

　　　　　　　　模糊   -webkit-filter:blur(3px)  

 

　　　　　　　　灰度 -webkit-filter:grayscale(0.5) 

 

　　　　　　　　亮度  -webkit-filter:brightness(0.5)

 

　　　　　　　　对比度   -webkit-filter:contrast(2.6)

 

　　　　　　　　饱和度   -webkit-filter:saturate(7.9）

 

　　　　　　色相旋转　-webkit-filter:hue-rotate(260deg)　

 

　　　　　　　　反色   -webkit-filter:invert(0.9)

 

　　　阴影  -webkit-filter:drop-shadow(10px 10px 10px #000)


以上各个滤镜效果可以结合使用，注意: 顺序是非常重要的，如果顺序变了，最后的效果也会发生变化。




这样的 处理过的图片是这样的

图片转为黑白色:

Pineapple

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

下面贴上 狐灵科技首页的代码  可以把代码 的div 换成你自己的


  1. /*.iclients-list li{ width:7.6%; float:left; min-height:82px; overflow:hidden; margin-right:0.733%;}*/  
  2. .iclients-list li img{  
  3.     -webkit-filter: grayscale(100%);  
  4.     -moz-filter: grayscale(100%);  
  5.     -ms-filter: grayscale(100%);  
  6.     -o-filter: grayscale(100%);  
  7.     filter: grayscale(100%);  
  8.     filter: gray;  
  9. }  
  10. .iclients-list li:hover{ cursor:pointer;}  
  11. .iclients-list li:hover img{  
  12.     -webkit-filter: grayscale(0);  
  13.     -moz-filter: grayscale(0);  
  14.     -ms-filter: grayscale(0);  
  15.     -o-filter: grayscale(0);  
  16.     filter: grayscale(0);  
  17.     filter: gray;  
  18. }  
  19. </style>  


图片变灰色的简单点的参考代码


  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. img {  
  6.     -webkit-filter: grayscale(80%); /* Chrome, Safari, Opera */  
  7.     filter: grayscale(80%);  
  8. }  
  9. </style>  
  10. </head>  
  11. <body>  
  12.   
  13. <p>图片转为黑白色:</p>  
  14.   
  15. <img src="http://www.hulingweb.cn/images/defaultpic.gif" alt="foxl">  
  16.   
  17. <p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>  
  18.   
  19. </body>  
  20. </html>  
上面的代码只是变灰色 鼠标放上去 不变回来的
如没特殊注明，文章均为狐灵科技原创,转载请注明  https://www.hulingweb.cn/jzzs/872.html
相关推荐
返回首页 了解更多建站资讯

—— 微信公众号 ——

热门标签

上一篇———————

图片设置 height 高度 100%无效的解决方法

下一篇———————

Nginx Rewrite伪静态重写URL尾部自动增加/斜杠
多一份免费策划方案，总有益处。

请直接添加技术总监微信联系咨询

立即询问 技术总监在线 15523356218
网站设计 品牌营销

多一份参考，总有益处

联系狐灵科技，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：023-68168040 / 大客户专线：15523356218

在线咨询 在线咨询 提交需求

关于狐灵科技

+

狐灵致力于互联网品牌建设与网络营销，专业领域包括 网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！

我们的优势

量身打造个性化网站制作

代码深度符合SEO优化

一站式企业网站建设服务

前沿视觉设计、研发能力

重庆网站建设公司

多项网站设计传播大奖

营销型网站建设专家

自主研发网站管理系统

B2C电商网站建设供应商

完善的售后服务体系

我们的不同

+

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！

友情链接 交换友情链接 交换友情链接 展开

公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：023-68168040

Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有 | 渝ICP备19005721号-1

专业团队为您提供 重庆网页设计, 品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！ | TAG标签 | 网站建设地图 | 网站地图

业务咨询 业务咨询 业务热线 023-68168040 提交需求 官方微信 狐灵网络科技官方微信