資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用 CSS3 為影像新增投影
filter 屬性用於設定視覺效果，例如 CSS 中影像的投影、對比度、亮度、飽和度和陰影。以下是語法：
語法
filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
如上所示，使用filter 屬性，我們可以設定以下效果：投影、模糊、亮度、對比度、灰度、色調旋轉、反轉、不透明度、飽和度、棕褐色和 url。
影像上的投影可能如下所示：
要在 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>
應用水平和垂直投影效果
示例
以下是如何為影像設定水平和垂直投影效果的示例。使用具有h-shadow 和v-shadow 值的drop-shadow 可以實現相同的效果：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(5px 5px 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>
為投影應用模糊效果
示例
模糊效果是 drop-shadow 下的第三個值。將其設定為畫素以獲得模糊效果：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(5px 0 20px orange);
}
</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>
更新於：2023年10月27日
8K+ 瀏覽量
廣告