filter

時間 2019-11-13

標籤 filter 简体版

原文原文鏈接

1.css3 filter（濾鏡）屬性css

實例：修改全部圖片的顏色爲黑白（100%灰度）：html

img{css3

-webkit-filter:grayscale(100%);/*Chrome,Safari,Opera*/web

filter:grayscale(100%);瀏覽器

}app

定義和使用函數

filter屬性定義了元素（一般是<img>）的可視效果（例如：模糊與飽和度）。flex

默認值：none動畫

繼承：nourl

動畫支持：是，詳細可閱讀CSS動畫

版本：css3

JavaScript語法：object.style.WebkitFilter="grayscale(100%)"

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
</style>
</head>
<body>

<p>圖片轉爲黑白色:</p>

<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性。</p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>點擊按鈕修改圖片的顏色爲黑白 (100% 灰度)。</p>

<p><strong> 注意:</strong> IE 或 Firefox 瀏覽器不支持該屬性。</p>

</body>
</html>

瀏覽器支持：

表格中的數字表示支持該方法的第一個瀏覽器的版本號。

緊跟在數字後面的-webkit-爲指定瀏覽器的前綴。

注意：舊版Internet Explorer瀏覽器（4.0 to 8.0）支持的非標準「filter」屬性已被廢棄。IE8及更低版本瀏覽器一般使用opacity屬性。

css語法：

提示：使用空格分隔多個濾鏡。

Filter函數：

注意：濾鏡一般使用百分比（如：75%），固然也可使用小數來表示（如：0.75）。

更多實例：

模糊實例

圖片使用高斯模糊效果：

img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
</style>
</head>
<body>

<p>圖片使用高斯模糊效果:</p>

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

Brightness 函數實例

使圖片變亮:

img {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
</style>
</head>
<body>

<p>使圖片變亮:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

Contrast 函數實例

調整圖像的對比度:

img {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
</style>
</head>
<body>

<p>調整圖像的對比度:</p>

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

drop-shadow 函數實例

給圖像設置一個陰影效果:

img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>給圖像設置一個陰影效果:</p>

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

Grayscale 函數實例

將圖像轉換爲灰度圖像:

img {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}
</style>
</head>
<body>

<p>將圖像轉換爲灰度圖像:</p>

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

hue-rotate() 函數實例

給圖像應用色相旋轉:

img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
filter: hue-rotate(90deg);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
filter: hue-rotate(90deg);
}
</style>
</head>
<body>

<p>給圖像應用色相旋轉:</p>

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

Invert 函數實例

反轉輸入圖像:

img {
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}
</style>
</head>
<body>

<p>反轉輸入圖像:</p>

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

Opacity 函數實例

轉化圖像的透明程度:

img {
-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
filter: opacity(30%);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
filter: opacity(30%);
}
</style>
</head>
<body>

<p>轉化圖像的透明程度:</p>

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

Saturate 函數實例

轉換圖像飽和度:

img {
-webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
filter: saturate(800%);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
filter: saturate(800%);
}
</style>
</head>
<body>

<p>轉換圖像飽和度:</p>

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

Sepia 函數實例

將圖像轉換爲深褐色:

img {
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
}
</style>
</head>
<body>

<p>將圖像轉換爲深褐色:</p>

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

複合函數

使用多個濾鏡，每一個濾鏡使用空格分隔。

注意: 順序是很是重要的 (例如使用 grayscale() 後再使用 sepia()將產生一個完整的灰度圖片)。

img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}
</style>
</head>
<body>

<p>組合任意數量的函數來控制渲染:</p>

<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>

</body>
</html>

全部濾鏡實例

如下實例演示了全部濾鏡的使用方法:

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

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

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

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

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 33%;
height: auto;
float: left;
}

.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>

HTML DOM 參考手冊: Style filter 屬性

← CSS Empty-cells 屬性

flex →