CSS中filter屬性的使用

Darkgel 發(fā)布于2019-08-29 16:59 / 3461人閱讀

摘要：屬性定義了元素的可視效果給圖像設(shè)置高斯模糊。值為圖像全黑值超過圖像更亮調(diào)整圖像的對比度。一值設(shè)定圖像會被調(diào)整的色環(huán)角度值。的價值是完全反轉(zhuǎn)。超過的值是允許的，則有更高的飽和度。值為則完全是深褐色的，值為圖像無變化。

filter 屬性定義了元素的可視效果 blur

給圖像設(shè)置高斯模糊。"radius"一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。

如果沒有設(shè)定值，則默認(rèn)是0；這個參數(shù)可設(shè)置css長度值，但不接受百分比值。

body {
  background-color: #000;
  color: skyblue;
}
div {
  border: 1px solid #fff;
  padding: 10px;
  width: 610px;
  margin: 10px;
}
.blur1 {
  filter: blur(0.4px);
}

.blur2 {
  filter: blur(1px);
}

.blur3 {
  filter: blur(4px);
}


  給圖像繪制高斯模糊，值越大越模糊
  
    blur
    blur
    blur

brightness

給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應(yīng)線性乘數(shù)效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設(shè)定值，默認(rèn)是1。

body {
  background-color: #000;
  color: skyblue;
}
div {
  border: 1px solid #fff;
  padding: 10px;
  width: 610px;
  margin: 10px;
}
.brightness1 {
  filter: brightness(0.30);
}

.brightness2 {
  filter: brightness(0.8);
}

.brightness3 {
  filter: brightness(1);
}


  給圖像一種線性乘法使看起來更亮或者更暗。值為0圖像全黑；值超過100%圖像更亮
  
    brightness
    brightness
    brightness

contrast

調(diào)整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設(shè)置值，默認(rèn)是1。

body {
  background-color: #000;
  color: skyblue;
}
div {
  border: 1px solid #fff;
  padding: 10px;
  width: 610px;
  margin: 10px;
}
.contrast1 {
  filter: contrast(10%);
}

.contrast2 {
  filter: contrast(50%);
}

.contrast3 {
  filter: contrast(100%);
}


  調(diào)整圖像對比度。值為0，圖像全黑；值超過100%會運用更低的對比
  
    contrast
    contrast
    contrast

graycale

將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0；

body {
  background-color: #000;
  color: skyblue;
}
div {
  border: 1px solid #fff;
  padding: 10px;
  width: 610px;
  margin: 10px;
}
.grayscale1 {
  filter: grayscale(10%);
}

.grayscale2 {
  filter: grayscale(50%);
}

.grayscale3 {
  filter: grayscale(100%);
}


  圖像轉(zhuǎn)換為灰度圖像，值為0圖像無變化；值為100%完全轉(zhuǎn)換為灰度圖像
  
    grayscale
    grayscale
    grayscale

hue-rotate

給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會被調(diào)整的色環(huán)角度值。值為0deg，則圖像無變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒有最大值，超過360deg的值相當(dāng)于又繞一圈。

body {
  background-color: #000;
  color: skyblue;
}
div {
  border: 1px solid #fff;
  padding: 10px;
  width: 610px;
  margin: 10px;
}
.huerotate1 {
  filter: hue-rotate(0deg);
}

.huerotate2 {
  filter: hue-rotate(90deg);
}

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


  給圖像用色相旋轉(zhuǎn)。值為0deg圖像無變化；沒有最大值，超過360deg相當(dāng)于又繞一圈
  
    huerotate
    huerotate
    huerotate

invert

反轉(zhuǎn)輸入圖像。值定義轉(zhuǎn)換的比例。100%的價值是完全反轉(zhuǎn)。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。若值未設(shè)置，值默認(rèn)是0。

body {
  background-color: #000;
  color: skyblue;
}
div {
  border: 1px solid #fff;
  padding: 10px;
  width: 610px;
  margin: 10px;
}
.invert1 {
  filter: invert(20%);
}

.invert2 {
  filter: invert(60%);
}

.invert3 {
  filter: invert(100%);
}


  反轉(zhuǎn)輸入圖像。0%圖像無變化，100%圖像完全反轉(zhuǎn)
  
    invert
    invert
    invert

opacity

轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當(dāng)于圖像樣本乘以數(shù)量。若值未設(shè)置，值默認(rèn)是1。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會提供硬件加速。

body {
  background-color: #000;
  color: skyblue;
}
div {
  border: 1px solid #fff;
  padding: 10px;
  width: 610px;
  margin: 10px;
}
.opacity1 {
  filter: opacity(10%);
}

.opacity2 {
  filter: opacity(80%);
}

.opacity3 {
  filter: opacity(100%);
}


  轉(zhuǎn)化圖像的透明度。0%，完全透明；100%圖像無變化
  
    opacity
    opacity
    opacity

saturate

轉(zhuǎn)換圖像飽和度。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。若值未設(shè)置，值默認(rèn)是1。

body {
  background-color: #000;
  color: skyblue;
}
div {
  border: 1px solid #fff;
  padding: 10px;
  width: 610px;
  margin: 10px;
}
.saturate1 {
  filter: saturate(0.2);
}

.saturate2 {
  filter: saturate(0.6);
}

.saturate3 {
  filter: saturate(1);
}


  轉(zhuǎn)換圖像飽和度。0%完全不飽和；100%，完全飽和
  
    saturate
    saturate
    saturate

sepia

將圖像轉(zhuǎn)換為深褐色。值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0；

body {
  background-color: #000;
  color: skyblue;
}
div {
  border: 1px solid #fff;
  padding: 10px;
  width: 610px;
  margin: 10px;
}
.sepia1 {
  filter: sepia(10%);
}

.sepia2 {
  filter: sepia(60%);
}

.sepia3 {
  filter: sepia(100%);
}


  圖像轉(zhuǎn)換為深褐色。值為100%為深褐色；值為0%圖像無變化
  
    sepia
    sepia
    sepia

drop-shadow

給圖像設(shè)置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數(shù)接受(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。

body {
  background-color: #000;
  color: skyblue;
}
div {
  border: 1px solid #fff;
  padding: 10px;
  width: 610px;
  margin: 10px;
}
.shadow1 {
  filter: drop-shadow(2px 2px 2px red);
}

.shadow2 {
  filter: drop-shadow(8px 8px 1px purple);
}

.shadow3 {
  filter: drop-shadow(1px 1px 10px hotpink);
}


  圖像設(shè)置陰影效果
  
    shadow
    shadow
    shadow

GPU云服務(wù)器云服務(wù)器 html中使用css css中使用cdn css的使用 js包裝對象中的屬性

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114024.html

發(fā)表評論

登陸后可評論

0條評論

Darkgel

男|高級講師

我要關(guān)注我要私信

TA的文章

騰訊云DNSPod解析套餐全面升配降價,專業(yè)版99元/年,企業(yè)版免費領(lǐng)取

閱讀 2981·2021-09-23 11:32
主機(jī)最早出現(xiàn)在什么時代-最早出現(xiàn)的計算機(jī)網(wǎng)絡(luò)是什么？

閱讀 2940·2021-09-22 15:12
基于VUE構(gòu)建做題H5組件【附源代碼】

閱讀 1720·2019-08-30 14:07
CSS中filter屬性的使用

閱讀 3462·2019-08-29 16:59
禁止用戶選擇的另一種思路（兼容 IE8）

閱讀 1652·2019-08-29 11:11
基于ServerLess的極簡網(wǎng)頁計數(shù)器：源碼分析與實踐

閱讀 2317·2019-08-26 13:50
前端每日實戰(zhàn)：166# 視頻演示如何用 CSS 創(chuàng)作一個 Safari LOGO

閱讀 2436·2019-08-26 13:49
js 工具函數(shù)

閱讀 2633·2019-08-26 11:49

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS中filter屬性的使用

相關(guān)文章

**不得不收藏的——IE中CSS-filter濾鏡小知識大全**