CSS3实战开发:使用CSS3实现photoshop的过滤效果
生活随笔
收集整理的這篇文章主要介紹了
CSS3实战开发:使用CSS3实现photoshop的过滤效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
原文:CSS3實戰開發:使用CSS3實現photoshop的過濾效果
我們知道，使用Photoshop來調整圖像的亮度和對比度，或者將圖片轉化為灰度等等是很常見的功能。今天我將給大家介紹幾個新特性，我們使用CSS來給web圖像添加相同的效果。
首先我們先在網頁中顯示一張圖片,html代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css" media="screen"> <title>CSS3實戰開發:使用CSS3實現photoshop的過濾效果</title> </head> <body><img src="20140821.jpg" width="800" /> </body> </html>?
此時運行效果圖如下：
下面我給大家介紹相應特性，同時給各位演示應用圖片過濾樣式之后的效果圖。
一、調整圖像灰階度：grayscale，范圍為0%-100%。應用樣式代碼如下：
img { -webkit-filter: grayscale(100%); }?
此時頁面效果為：
二、給圖片應用深褐色效果：sepia，范圍0-100%語法代碼如下：
img { -webkit-filter: sepia(100%); }?
此時運行頁面效果：
三、調整圖片曝光度：brightness，范圍0%-100%，語法代碼如下:
img { -webkit-filter: brightness(40%); }?
運行頁面，效果如下：
四、調整圖像對比度：contrast，語法代碼如下：
img { -webkit-filter: contrast(500%); }?
頁面效果如下：
最后給大家介紹一個模糊特效：blur，語法代碼如下：
img { -webkit-filter: blur(2px); }?
此時頁面效果如下：
當然，上面的這些特性是可以同時使用的，比如，當鼠標劃過圖片時，將圖片變成灰色的，且模糊圖片，則代碼如下：
img:hover { -webkit-filter:grayscale(100%) blur(2px); }?
此時頁面效果為：
?
原來用CSS特性完成Photoshop的過濾功能是如此簡單。
?
總結
以上是生活随笔為你收集整理的CSS3实战开发:使用CSS3实现photoshop的过滤效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java基础知识回顾之javaIO类--
- 下一篇： CSS Specificity--CSS