-
首頁
-
網站建設
-
優化推廣
-
案例
方案
方案
Solutions
電商平臺
電商網站開發
E-commerce & System
微信營銷
資訊
我們
我們
About Us
聯系
聯系
Contact Us
-
- 聯系方式
- 業務熱線： 15082661954
- 郵箱： foxl@www.kxlw.net
- 人才招聘
- HR郵箱：
- 190014322@qq.com
精準傳達 ? 價值共享
洞悉互聯網前沿資訊，探尋網站營銷規律
利用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)
以上各個濾鏡效果可以結合使用，注意: 順序是非常重要的，如果順序變了，最后的效果也會發生變化。
這樣的 處理過的圖片是這樣的
圖片轉為黑白色:
注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性。
下面貼上 狐靈科技首頁的代碼 可以把代碼 的div 換成你自己的
- /*.iclients-list li{ width:7.6%; float:left; min-height:82px; overflow:hidden; margin-right:0.733%;}*/
- .iclients-list li img{
- -webkit-filter: grayscale(100%);
- -moz-filter: grayscale(100%);
- -ms-filter: grayscale(100%);
- -o-filter: grayscale(100%);
- filter: grayscale(100%);
- filter: gray;
- }
- .iclients-list li:hover{ cursor:pointer;}
- .iclients-list li:hover img{
- -webkit-filter: grayscale(0);
- -moz-filter: grayscale(0);
- -ms-filter: grayscale(0);
- -o-filter: grayscale(0);
- filter: grayscale(0);
- filter: gray;
- }
- </style>
圖片變灰色的簡單點的參考代碼
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- img {
- -webkit-filter: grayscale(80%); /* Chrome, Safari, Opera */
- filter: grayscale(80%);
- }
- </style>
- </head>
- <body>
- <p>圖片轉為黑白色:</p>
- <img src="http://www.www.kxlw.net/images/defaultpic.gif" alt="foxl">
- <p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性。</p>
- </body>
- </html>
關于狐靈科技
+狐靈致力于互聯網品牌建設與網絡營銷，專業領域包括 網站建設、 SEO優化、移動互聯網營銷、高端網站建設、高端網站設計、品牌網站定制開發、營銷策劃推廣電子商務、移動互聯網營銷、 為不同類型的客戶提供良好的互聯網應用定制解決方案，我們將策略和執行緊密結合，且不斷評估并優化我們的方案，為客戶提供一體化全方位的互聯網品牌整合方案！
我們的優勢
多項網站設計傳播大獎
營銷型網站建設專家
自主研發網站管理系統
B2C電商網站建設供應商
完善的售后服務體系
我們的不同
+在我們的對手消耗大量的時間停留在碎片化的互聯網設計或者程序實現的時候，我們已經開始把數字化品牌建設和網絡傳播進行了整合。我們提供從前期的網站品牌分析策劃、網站設計、創意表現、系統開發以及后續網站運營反饋建議等一系列服務，幫助企業打造創新的互聯網品牌經營模式與有效的網絡營銷方法,為所有謀求長遠發展的企業品牌貢獻全力！
公司地址：重慶市九龍坡楊家坪重百大樓21-8 | 業務熱線：15082661954
Copyright © 2017-2020 Fox spirit Network. 狐靈科技 版權所有 | 渝ICP備19005721號-1
專業團隊為您提供 重慶網頁設計, 品牌網站設計,營銷型網站制作,SEO優化關鍵詞排名推廣等服務,建網站就找狐靈科技！ | TAG標簽 | 網站建設地圖 | 網站地圖
