資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用CSS為影像新增視覺效果？
filter屬性用於設定視覺效果，例如在CSS中為影像新增投影、對比度、亮度、飽和度和陰影。以下是語法：
語法
以下是語法：
filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
如上所示，使用filter屬性，我們可以設定以下效果：對比度、投影、模糊、亮度、灰度、色調旋轉、反轉、不透明度、飽和度、棕褐色、url。
以下是使用CSS為影像新增視覺效果的示例程式碼：
使用反轉效果為影像新增視覺效果
invert()用於反轉影像中的樣本。其中，0%（0）是實際影像，而100%的值將完全反轉影像。要在CSS3中反轉影像，請使用filter屬性的invert()值。
示例
讓我們來看一個使用反轉效果為影像新增視覺效果的示例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
margin: 20px;
}
img.normal{
width: 300px;
height: 300px;
}
img.filter {
width: 300px;
height: 300px;
filter: invert(100%);
}
</style>
</head>
<body>
<h1>CSS Image effects example</h1>
<img class="normal" src="https://tutorialspoint.tw/python/images/python-mini-logo.jpg">
<img class="filter" src="https://tutorialspoint.tw/python/images/python-mini-logo.jpg">
</body>
</html>
使用色調旋轉為影像新增視覺效果
色調旋轉會調整，即增加或減少影像色調值。要在CSS3中設定影像的色調旋轉，請對filter屬性使用hue-rotate值。色調旋轉以度數設定，例如：
實際影像：0度，即預設值
旋轉30度：30度
旋轉90度：90度，等等。
正色調旋轉：增加色調值
負色調旋轉：減少色調值
示例
現在讓我們來看一個使用CSS3應用色調旋轉的示例。我們將色調旋轉設定為45度：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: hue-rotate(45deg);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://tutorialspoint.tw/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://tutorialspoint.tw/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
使用投影效果為影像新增視覺效果
要在CSS3中為影像新增投影效果，請對filter屬性使用drop-shadow值。它具有以下值：
h-shadow − 指定水平陰影的畫素值。
v-shadow − 指定垂直陰影的畫素值。負值將陰影放置在影像上方。
blur − 為陰影新增模糊效果。
spread − 正值會導致陰影擴充套件，負值會導致陰影收縮。
color − 為陰影新增顏色
示例
讓我們來看一個使用drop-shadow為影像應用投影效果的示例：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://tutorialspoint.tw/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://tutorialspoint.tw/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
使用棕褐色效果為影像新增視覺效果
sepia為影像設定棕褐色效果。要在CSS3中設定棕褐色效果，請對filter屬性使用sepia值：
實際影像：0%
完全棕褐色：100%
示例
在這裡，我們將棕褐色設定為100%，以獲得完全效果：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://tutorialspoint.tw/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://tutorialspoint.tw/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
使用飽和度為影像新增視覺效果
要在CSS3中調整影像的飽和度，請對filter屬性使用saturate值。飽和度以百分比值設定，例如：
未飽和影像：0%
實際影像：100%，即預設值
超級飽和：設定為超過100%
示例
讓我們看看如何使用filter屬性和saturate值在CSS中飽和影像：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: saturate(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://tutorialspoint.tw/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://tutorialspoint.tw/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
321 次檢視
