CSS sepia()用法及代碼示例

sepia() 函數是一個內置函數，用於將過濾器應用於圖像以將圖像轉換為棕褐色圖像。

用法:

sepia( amount )

參數：此函數接受保存棕褐色值的單個參數數量。棕褐色的值是根據值和百分比設置的。值 0% 表示原始圖像，100% 表示完整的棕褐色圖像。

下麵的示例說明了 CSS:Example 中的 sepia() 函數：


<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS sepia() Function</title> 
      
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
        .sepia_effect {
            filter:sepia(100%);
        }
    </style>
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h2>CSS sepia() function</h2>
      
    <img class="sepia_effect" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"> 
</body> 
  
</html>

輸出：

支持的瀏覽器：sepia()函數支持的瀏覽器如下：

穀歌瀏覽器
IE瀏覽器
Firefox
Safari
Opera

相關用法

注：本文由純淨天空篩選整理自jit_t大神的英文原創作品 CSS | sepia() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。