精品国产免费观看久久久_久久天天躁狠狠躁夜夜爽_无码人妻少妇久久中文字幕_狠狠做深爱婷婷久久综合一区

網絡建站知識

精準傳達 ? 價值共享

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

查看其它板塊

利用Css3filter(濾鏡) 屬性將圖片變灰色鼠標放上去恢復變色

作者：狐靈科技 | 2020-02-06 19:58 |點擊：

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

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

網站設計 品牌營銷

多一份參考，總有益處

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

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

業務熱線：15082661954 / 大客戶專線：15523356218

關于狐靈科技

+

狐靈致力于互聯網品牌建設與網絡營銷，專業領域包括 網站建設、 SEO優化、移動互聯網營銷、高端網站建設、高端網站設計、品牌網站定制開發、營銷策劃推廣電子商務、移動互聯網營銷、 為不同類型的客戶提供良好的互聯網應用定制解決方案，我們將策略和執行緊密結合，且不斷評估并優化我們的方案，為客戶提供一體化全方位的互聯網品牌整合方案！

我們的優勢

量身打造個性化網站制作

代碼深度符合SEO優化

一站式企業網站建設服務

前沿視覺設計、研發能力

重慶網站建設公司

多項網站設計傳播大獎

營銷型網站建設專家

自主研發網站管理系統

B2C電商網站建設供應商

完善的售后服務體系

我們的不同

+

在我們的對手消耗大量的時間停留在碎片化的互聯網設計或者程序實現的時候，我們已經開始把數字化品牌建設和網絡傳播進行了整合。我們提供從前期的網站品牌分析策劃、網站設計、創意表現、系統開發以及后續網站運營反饋建議等一系列服務，幫助企業打造創新的互聯網品牌經營模式與有效的網絡營銷方法,為所有謀求長遠發展的企業品牌貢獻全力！

公司地址：重慶市九龍坡楊家坪重百大樓21-8 | 業務熱線：15082661954

Copyright © 2017-2020 Fox spirit Network. 狐靈科技 版權所有 | 渝ICP備19005721號-1

專業團隊為您提供 重慶網頁設計, 品牌網站設計,營銷型網站制作,SEO優化關鍵詞排名推廣等服務,建網站就找狐靈科技！ | TAG標簽 | 網站建設地圖 | 網站地圖