CSS3實戰開發:使用CSS3實現photoshop的過濾效果

時間 2019-11-21

標籤 css3 css 實戰開發使用實現 photoshop 過濾效果欄目 CSS 简体版

原文原文鏈接

咱們知道，使用Photoshop來調整圖像的亮度和對比度，或者將圖片轉化爲灰度等等是很常見的功能。今天我將給你們介紹幾個新特性，咱們使用CSS來給web圖像添加相同的效果。css

首先咱們先在網頁中顯示一張圖片,html代碼以下：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>

此時運行效果圖以下：web

下面我給你們介紹相應特性，同時給各位演示應用圖片過濾樣式以後的效果圖。spa

1、調整圖像灰階度：grayscale，範圍爲0%-100%。應用樣式代碼以下：3d

img {  
     -webkit-filter: grayscale(100%);  
}

此時頁面效果爲：code

2、給圖片應用深褐色效果：sepia，範圍0-100%語法代碼以下：htm

img {  
     -webkit-filter: sepia(100%);  
}

此時運行頁面效果：blog

3、調整圖片曝光度：brightness，範圍0%-100%，語法代碼以下:圖片

img {  
    -webkit-filter: brightness(40%);   
}

運行頁面，效果以下：utf-8

4、調整圖像對比度：contrast，語法代碼以下：

img {  
    -webkit-filter: contrast(500%);   
}

頁面效果以下：

最後給你們介紹一個模糊特效：blur，語法代碼以下：

img {  
    -webkit-filter: blur(2px);   
}

此時頁面效果以下：

固然，上面的這些特性是能夠同時使用的，好比，當鼠標劃過圖片時，將圖片變成灰色的，且模糊圖片，則代碼以下：

img:hover {  
    -webkit-filter:grayscale(100%) blur(2px);   
}

此時頁面效果爲：

原來用CSS特性完成Photoshop的過濾功能是如此簡單。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。