网络建站知识

精准传达 • 价值共享

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

利用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>  
上面的代码只是变灰色 鼠标放上去 不变回来的
多一份免费策划方案,总有益处。

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

网站设计 品牌营销

多一份参考,总有益处

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

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

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