CSS的filter屬性添加各種圖形效果使用示例
CSS的filter屬性用于給元素添加各種圖形效果,如模糊、顏色偏移等,它支持多種濾鏡函數(shù),如blur()、brightness()、contrast()等,可以單獨使用,也可以組合使用,以創(chuàng)建更復(fù)雜的效果。
前言
filter 屬性可設(shè)置為 none 或下面列出的一個或多個函數(shù)。如果任何函數(shù)的參數(shù)無效，則該函數(shù)返回 none。除特殊說明外，函數(shù)的值如果接受百分比值（如 34%），那么該函數(shù)也接受小數(shù)值（如 0.34）。
當(dāng)單個 filter 屬性具有多個函數(shù)時，濾鏡將按順序依次應(yīng)用。
blur()函數(shù)
blur()函數(shù)是filter屬性的一種取值，用于給元素添加模糊效果。
使用blur()函數(shù)時，需要指定一個長度值作為參數(shù)，表示要應(yīng)用的模糊程度。模糊程度越大，圖像就越模糊。例如：
.blur-element {
filter: blur(5px);
}
上述代碼將給class為"blur-element"的元素添加一個5像素的模糊效果。
除了長度值以外，blur()函數(shù)還可以接受其他單位，如像素（px）、百分比（%）等。此外，也可以通過使用不同的濾鏡函數(shù)組合來創(chuàng)建更復(fù)雜的效果。
示例
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/7.png');
filter: blur(5px);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>在上面的示例中，我們創(chuàng)建了一個帶有class為"blur-element"的div元素，并將其背景圖片設(shè)置為'img/7.png'。然后，在CSS樣式中，我們?yōu)樵撛卦O(shè)置了寬度、高度和filter屬性。filter屬性的blur()函數(shù)被設(shè)置為5像素，這將給元素應(yīng)用一個5像素的模糊效果。
brightness()函數(shù)
CSS的filter屬性中的brightness()函數(shù)用于調(diào)整圖像的亮度。它可以接受一個百分比值或者小數(shù)作為參數(shù)，用于指定亮度的級別。
下面是brightness()函數(shù)的使用示例：
.brightness-element {
filter: brightness(150%); /* 或者 filter: brightness(1.5); */
}
上述代碼將給class為"brightness-element"的元素應(yīng)用一個亮度增加50%的效果。你可以通過調(diào)整百分比或小數(shù)的值來改變亮度的級別。值為 0% 將創(chuàng)建全黑圖像，值大于100%會增加亮度，而值小于100%會減少亮度。
如果要降低亮度，可以使用小于1的小數(shù)值或小于100%的百分比。例如，filter: brightness(0.8)會將亮度降低為80%。
需要注意的是，brightness()函數(shù)可以與其他濾鏡函數(shù)組合使用，以創(chuàng)建更復(fù)雜的效果。
示例
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/7.png');
filter: brightness(150%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>contrast()函數(shù)
CSS的filter屬性中的contrast()函數(shù)用于調(diào)整圖像的對比度。它接受一個百分比值或者小數(shù)作為參數(shù)，用于指定對比度的級別。
下面是contrast()函數(shù)的使用示例：
.contrast-element {
filter: contrast(150%); /* 或者 filter: contrast(1.5); */
}
上述代碼將給class為"contrast-element"的元素應(yīng)用一個對比度增加50%的效果。可以通過調(diào)整百分比或者小數(shù)值來改變對比度的級別。值是 0% 將使圖像變灰，值大于100%會增加對比度，而值小于100%會降低對比度。
如果想降低對比度，可以使用小于1的小數(shù)值或者小于100%的百分比。例如，filter: contrast(0.8)會將對比度降低為80%。
示例
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/7.png');
filter: contrast(150%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>drop-shadow()函數(shù)
CSS的filter屬性中的drop-shadow()函數(shù)用于向圖像添加陰影效果。它可以接受多個參數(shù)，包括陰影的顏色、偏移量、模糊度等。
下面是drop-shadow()函數(shù)的使用示例：
.shadow-element {
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}
上述代碼將給class為"shadow-element"的元素應(yīng)用一個向右下角偏移2個像素、向外擴(kuò)散4個像素、顏色為半透明黑色的陰影效果。
drop-shadow()函數(shù)有三個必需的參數(shù)：水平偏移量、垂直偏移量和模糊半徑?？梢酝ㄟ^添加第四個參數(shù)來指定陰影的顏色。若省略第四個參數(shù)，則默認(rèn)使用與元素同色的陰影。
下面是drop-shadow()函數(shù)的參數(shù)說明：
水平偏移量：陰影相對于元素的水平位移量?？梢詾樨?fù)數(shù)，表示陰影向左偏移。垂直偏移量：陰影相對于元素的垂直位移量?？梢詾樨?fù)數(shù)，表示陰影向上偏移。模糊半徑：陰影模糊的半徑大小?？梢詾?，表示完全不模糊。陰影顏色：陰影的顏色?？梢允褂妹伾?、RGB值、十六進(jìn)制顏色、HSL值等表示顏色的格式，也可以使用rgba()函數(shù)指定顏色和透明度。
示例
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/7.png');
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>grayscale()函數(shù)
CSS的filter屬性中的grayscale()函數(shù)用于將圖像轉(zhuǎn)為灰度圖像。它接受一個百分比值或者小數(shù)作為參數(shù)，用于指定灰度的級別。
下面是grayscale()函數(shù)的使用示例：
.grayscale-element {
filter: grayscale(50%); /* 或者 filter: grayscale(0.5); */
}
上述代碼將給class為"grayscale-element"的元素應(yīng)用一個灰度效果，使圖像變?yōu)樵瓉砹炼鹊?0%?？梢酝ㄟ^調(diào)整百分比或者小數(shù)值來改變灰度的級別。值為100%或者1表示完全灰度，而值為0%或者0表示完全恢復(fù)原色。
如果想要部分應(yīng)用灰度效果，可以將灰度函數(shù)與其他濾鏡函數(shù)組合使用。例如，可以使用以下代碼將圖像的一部分變?yōu)榛叶?，而保持其他部分的原色?/p>
.grayscale-element {
filter: grayscale(100%) brightness(150%);
}
示例
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/7.png');
filter: grayscale(1) brightness(200%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>hue-rotate() (en-US)函數(shù)
CSS的filter屬性中的hue-rotate()函數(shù)用于對圖像進(jìn)行色相旋轉(zhuǎn)。它接受一個角度值作為參數(shù)，用于指定旋轉(zhuǎn)的角度。
下面是hue-rotate()函數(shù)的使用示例：
.hue-rotate-element {
filter: hue-rotate(90deg);
}
上述代碼將給class為"hue-rotate-element"的元素應(yīng)用一個色相旋轉(zhuǎn)效果，將圖像的色相順時針旋轉(zhuǎn)90度?？梢酝ㄟ^調(diào)整角度值來改變旋轉(zhuǎn)的程度。
hue-rotate()函數(shù)的參數(shù)是一個角度值，可以使用角度單位（如deg）表示，也可以使用弧度單位（如rad）表示。正值表示順時針旋轉(zhuǎn)，負(fù)值表示逆時針旋轉(zhuǎn)。角度值可以是任意實數(shù)，但超過360度或-360度的部分會被忽略。值為 0deg，則圖像無變化。
示例
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/7.png');
filter: hue-rotate(90deg);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>invert() (en-US)函數(shù)
CSS的filter屬性中的invert()函數(shù)用于將圖像進(jìn)行反色處理。它接受一個百分比值或者小數(shù)作為參數(shù)，用于指定反色的程度。
下面是invert()函數(shù)的使用示例：
.invert-element {
filter: invert(50%); /* 或者 filter: invert(0.5); */
}
上述代碼將給class為"invert-element"的元素應(yīng)用一個反色效果，使圖像的顏色與原來相反，亮度和對比度保持不變?？梢酝ㄟ^調(diào)整百分比或者小數(shù)值來改變反色的程度。值為100%或者1表示完全反色，而值為0%或者0表示完全恢復(fù)原色。
如果想要部分應(yīng)用反色效果，可以將反色函數(shù)與其他濾鏡函數(shù)組合使用。例如，可以使用以下代碼將圖像的一部分變?yōu)榉瓷３制渌糠值脑?/p>
.invert-element {
filter: invert(100%) brightness(150%);
}
示例
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/7.png');
filter: invert(100%) brightness(150%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>opacity()函數(shù)
CSS的filter屬性中的opacity()函數(shù)用于調(diào)整元素的不透明度（透明度）。它接受一個百分比值或者小數(shù)作為參數(shù)，用于指定元素的透明度級別。
下面是opacity()函數(shù)的使用示例：
.opacity-element {
filter: opacity(50%); /* 或者 filter: opacity(0.5); */
}
上述代碼將給class為"opacity-element"的元素應(yīng)用一個透明效果，使元素的透明度降低到原來的50%?？梢酝ㄟ^調(diào)整百分比或者小數(shù)值來改變透明度的級別。值為100%或者1表示完全不透明，而值為0%或者0表示完全透明。
需要注意的是，opacity()函數(shù)會影響元素及其內(nèi)容的透明度，包括文本、圖像等。如果只想調(diào)整背景的透明度而保持文本不透明，可以考慮使用rgba顏色值來設(shè)置背景色的透明度。
示例
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/7.png');
filter: opacity(50%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>saturate() (en-US)函數(shù)
CSS的filter屬性中的saturate()函數(shù)用于調(diào)整圖像的飽和度。它接受一個百分比值或者小數(shù)作為參數(shù)，用于指定飽和度的級別。
下面是saturate()函數(shù)的使用示例：
.saturate-element {
filter: saturate(200%); /* 或者 filter: saturate(2); */
}
上述代碼將給class為"saturate-element"的元素應(yīng)用一個飽和度增強(qiáng)效果，使圖像變得更加鮮艷。
可以通過調(diào)整百分比或者小數(shù)值來改變飽和度的級別。值為100%或者1表示保持原有飽和度不變，而值為0%或者0表示完全去除飽和度（即灰色圖像）。值大于100%或者1表示增強(qiáng)飽和度，而值小于100%或者1表示減少飽和度。
示例
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/7.png');
filter: saturate(200%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>sepia() (en-US)函數(shù)
CSS的filter屬性中的sepia()函數(shù)用于將圖像轉(zhuǎn)換為深褐色（復(fù)古）效果。它接受一個百分比值或者小數(shù)作為參數(shù)，用于指定sepia（褐色）效果的程度。
下面是sepia()函數(shù)的使用示例：
.sepia-element {
filter: sepia(100%); /* 或者 filter: sepia(1); */
}
上述代碼將給class為"sepia-element"的元素應(yīng)用一個sepia效果，使圖像呈現(xiàn)出復(fù)古的褐色調(diào)?？梢酝ㄟ^調(diào)整百分比或者小數(shù)值來改變sepia效果的程度。值為100%或者1表示完全應(yīng)用sepia效果，而值為0%或者0表示完全不應(yīng)用sepia效果。
示例
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blur-element {
width: 300px;
height: 200px;
background-image: url('img/7.png');
filter: sepia(100%);
}
</style>
</head>
<body>
<div class="blur-element"></div>
</body>
</html>組合函數(shù)
CSS的filter屬性支持多個濾鏡函數(shù)的組合使用，以創(chuàng)建更復(fù)雜的效果?？梢酝ㄟ^空格將多個函數(shù)鏈接在一起，它們的順序會影響最終效果。
以下是一些常見的filter屬性的組合函數(shù)：
1、brightness()和contrast()
.brightness-contrast {
filter: brightness(150%) contrast(150%);
}
上述代碼將給class為"brightness-contrast"的元素應(yīng)用一個亮度增強(qiáng)和對比度增強(qiáng)的效果，使圖像更加鮮明。
2、blur()和opacity()
.blur-opacity {
filter: blur(5px) opacity(50%);
}
上述代碼將給class為"blur-opacity"的元素應(yīng)用一個模糊和透明效果，使圖像變得模糊且半透明。
3、grayscale()、sepia()和saturate()
.grayscale-sepia-saturate {
filter: grayscale(100%) sepia(50%) saturate(200%);
}
上述代碼將給class為"grayscale-sepia-saturate"的元素應(yīng)用一個灰度、褐色和飽和度增強(qiáng)的效果，使圖像呈現(xiàn)出復(fù)古的灰色調(diào)。
總結(jié)
CSS的filter屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像、背景和邊框的渲染。
到此這篇關(guān)于CSS的filter屬性添加各種圖形效果使用示例的文章就介紹到這了,更多相關(guān)CSS的filter屬性使用示例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
css也瘋狂! 用background 插入flash播放器
css也瘋狂! 用background 插入flash播放器...2007-01-01
div+css布局必須要知道的css條件注釋理論及實踐...2007-05-05
html下利用javascript連數(shù)據(jù)庫
html下利用javascript操作本地數(shù)據(jù)庫的代碼2008-02-02
推薦一篇利用th,colgroup,col定義表格樣式...2007-04-04
CSS錦囊...2007-02-02
IE死了，無論是IE6還是7，今天遇到了這個問題！帶著滿身的汗查了半天，終于定位到問題了！原來是float元素沒有閉合的原因！2008-04-04
我們都知道float:left和float:right，但是否想過float:center呢？居中浮動。。。2008-08-08
ul+li及css制作韓國風(fēng)格菜單代碼...2007-11-11
js開發(fā)中的頁面、屏幕、瀏覽器的位置原理（高度寬度）說明講解（附圖）
前端js開發(fā)中我們常遇到對頁面、屏幕、瀏覽器寬高和位置的獲取問題，有時間查到了js的實現(xiàn)代碼，但是不知道為什么。本篇圖文并茂講解Web環(huán)境中屏幕、瀏覽器及頁面的高度、寬度信息。2023-02-02
前兩天特意裝了一下IETester，用以方便測試，裝好后使用發(fā)現(xiàn)IE8有兩個地方需要大家注意。2008-06-06