欧美肥老太交性视频,欧美老年人做爰视频,欧美老妇免费做爰视频

    1. <code id="1cg5a"><em id="1cg5a"></em></code><tr id="1cg5a"></tr>

    2. <center id="1cg5a"></center>

      <code id="1cg5a"><em id="1cg5a"></em></code>
      網絡建站知識

      精準傳達 ? 價值共享

      洞悉互聯網前沿資訊,探尋網站營銷規律

      利用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.100megs21.com/images/defaultpic.gif" alt="foxl">  
      16.   
      17. <p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性。</p>  
      18.   
      19. </body>  
      20. </html>  
      上面的代碼只是變灰色 鼠標放上去 不變回來的
      如沒特殊注明,文章均為狐靈科技原創,轉載請注明??http://www.100megs21.com/jzzs/872.html
      多一份免費策劃方案,總有益處。

      請直接添加技術總監微信聯系咨詢

      網站設計 品牌營銷

      多一份參考,總有益處

      聯系狐靈科技,免費獲得專屬《策劃方案》及報價

      咨詢相關問題或預約面談,可以通過以下方式與我們聯系

      業務熱線:023-68168040 / 大客戶專線:15523356218

      欧美肥老太交性视频,欧美老年人做爰视频,欧美老妇免费做爰视频

        1. <code id="1cg5a"><em id="1cg5a"></em></code><tr id="1cg5a"></tr>

        2. <center id="1cg5a"></center>

          <code id="1cg5a"><em id="1cg5a"></em></code>