• <small id='ddveysf6'></small><noframes id='mfgzixnu'>

    <tfoot id='vnf8ocu2'></tfoot>
  • <legend id='45oxc57q'><style id='9uykrjl8'><dir id='kz0a73jd'><q id='hqoi903x'></q></dir></style></legend>
      <i id='ro3jwy81'><tr id='snrnnrib'><dt id='sfnkcst3'><q id='akysyg1z'><span id='3uz3h6m8'><b id='g1xlc5lj'><form id='lduowkql'><ins id='24vt0xz3'></ins><ul id='dum0d2pt'></ul><sub id='wgmss9eb'></sub></form><legend id='fn1rowqi'></legend><bdo id='zt9n4hmb'><pre id='r8jf7iu3'><center id='xvacnawb'></center></pre></bdo></b><th id='lmye1st3'></th></span></q></dt></tr></i><div id='yu2ha94c'><tfoot id='uqvuy5iw'></tfoot><dl id='2dgidka6'><fieldset id='vp5m1koo'></fieldset></dl></div>

          <bdo id='30fz8iy2'></bdo><ul id='nal1d9vp'></ul>

        精准传达 • 价值共享

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

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

        作者: 庚午网络 | 2020-10-20 16:52 |点击:

        <i id='gu5sg3fp'><tr id='xgjqhtt0'><dt id='ixt66515'><q id='pqj2g652'><span id='iuxqre8v'><b id='7vdavqdf'><form id='hfp63yih'><ins id='f6oxajgt'></ins><ul id='ryt5gpgq'></ul><sub id='lsjokfnf'></sub></form><legend id='z64bx58e'></legend><bdo id='hgt99ion'><pre id='kokm3zud'><center id='cs9laey1'></center></pre></bdo></b><th id='pbxx0hh2'></th></span></q></dt></tr></i><div id='cb9jmrfk'><tfoot id='6q1t82ny'></tfoot><dl id='d95sadke'><fieldset id='xi49abm6'></fieldset></dl></div>

            <small id='2wbpmc5l'></small><noframes id='9dbbb2jo'>

              <bdo id='0lidjv9u'></bdo><ul id='l3q4ej99'></ul>

              1. <tfoot id='8t0600jx'></tfoot>

                • <legend id='fiw2rcav'><style id='aq4mfes4'><dir id='pk4hju2i'><q id='1hsa9arc'></q></dir></style></legend>
                    <tbody id='q6ej0w52'></tbody>
                • 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.hngengwu.com/images/defaultpic.gif" alt="foxl">  
                  16.   
                  17. <p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>  
                  18.   
                  19. </body>  
                  20. </html>  
                  上面的代码只是变灰色 鼠标放上去 不变回来的
                  二度创作,如有侵权请联系删除。如没特殊注明,文章均为庚午网络原创,转载请注明https://www.hngengwu.com/wangzhanjianshezhishi/103.html

                  <small id='lgu9um8s'></small><noframes id='jk2kqgdu'>

                  <i id='zwr3cc29'><tr id='m6uoyq5x'><dt id='pfts0z5r'><q id='hdrjqju3'><span id='3gljbc5r'><b id='ej7bbgmb'><form id='ueb16cod'><ins id='de01irfe'></ins><ul id='46kp4seo'></ul><sub id='4u0v72dc'></sub></form><legend id='4vmwmszw'></legend><bdo id='4qy6sxnf'><pre id='nykl4r0w'><center id='g7tparn8'></center></pre></bdo></b><th id='rdvciarb'></th></span></q></dt></tr></i><div id='szvkaaxy'><tfoot id='0qgv8mg5'></tfoot><dl id='gsojp0av'><fieldset id='vo00oo0l'></fieldset></dl></div>
                  • <bdo id='ylm4u9u8'></bdo><ul id='sezy3gi2'></ul>

                    <tfoot id='rd6npdpg'></tfoot>
                  1. <legend id='hfw1idys'><style id='25b0b4k5'><dir id='u9du3mtp'><q id='ompatb0i'></q></dir></style></legend>
                      多一份策划方案,总有益处。

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

                      网站设计 品牌营销

                      多一份参考,总有益处

                      联系庚午网络,获得专属《策划方案》及报价

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

                      业务热线:18574395938 / 大客户专线:18574395938