CSS中filter屬性的使用

Darkgel 發布于2019-08-29 16:59 / 3454人閱讀

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

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

給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。

如果沒有設定值，則默認是0；這個參數可設置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

給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是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

調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設置值，默認是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%);
}


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

graycale

將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是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%);
}


  圖像轉換為灰度圖像，值為0圖像無變化；值為100%完全轉換為灰度圖像
  
    grayscale
    grayscale
    grayscale

hue-rotate

給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值為0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當于又繞一圈。

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);
}


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

invert

反轉輸入圖像。值定義轉換的比例。100%的價值是完全反轉。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。若值未設置，值默認是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%);
}


  反轉輸入圖像。0%圖像無變化，100%圖像完全反轉
  
    invert
    invert
    invert

opacity

轉化圖像的透明程度。值定義轉換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當于圖像樣本乘以數量。若值未設置，值默認是1。該函數與已有的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%);
}


  轉化圖像的透明度。0%，完全透明；100%圖像無變化
  
    opacity
    opacity
    opacity

saturate

轉換圖像飽和度。值定義轉換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。若值未設置，值默認是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);
}


  轉換圖像飽和度。0%完全不飽和；100%，完全飽和
  
    saturate
    saturate
    saturate

sepia

將圖像轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是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%);
}


  圖像轉換為深褐色。值為100%為深褐色；值為0%圖像無變化
  
    sepia
    sepia
    sepia

drop-shadow

給圖像設置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數接受(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的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);
}


  圖像設置陰影效果
  
    shadow
    shadow
    shadow

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114024.html

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

摘要：屬性特性描述可選值，布爾值，默認值為，啟用過濾器為不啟用過濾器。正常顯示，內容對象將翻過來。，設置對象是否投影，布爾值，和，設置對象投影不透明度，，假如為那么該值無效。前言前段時間在做一個專題的時候用到了opacity不透明度屬性，因為設計圖上是半透明背景，白色文字 showImg(https://segmentfault.com/img/bVknaX); 所以在IE用到了其...

yuanzhanghu 2019-08-28 18:03 評論0 收藏0
CSS中filter屬性的使用

摘要：屬性定義了元素的可視效果給圖像設置高斯模糊。值為圖像全黑值超過圖像更亮調整圖像的對比度。一值設定圖像會被調整的色環角度值。的價值是完全反轉。超過的值是允許的，則有更高的飽和度。值為則完全是深褐色的，值為圖像無變化。 filter 屬性定義了元素的可視效果 blur 給圖像設置高斯模糊。radius一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。如果沒有...

EsgynChina 2019-08-02 11:42 評論0 收藏0
用CSS和JS打造一個簡單的圖片編輯器

摘要：原文來自效果圖本文主要是利用的和簡單的代碼來實現一個簡單的圖片編輯器，包括對圖片的透明度，黑白，圖片亮度等調節。簡單地說完之后，我們來動手創建一個簡單的圖片編輯器。原文來自：https://jellybool.com/post/build-a-simple-image-editor-with-css-js demo: https://jellybool.com/demo/i...

jerryloveemily 2019-08-28 18:12 評論0 收藏0
用CSS和JS打造一個簡單的圖片編輯器

摘要：原文來自效果圖本文主要是利用的和簡單的代碼來實現一個簡單的圖片編輯器，包括對圖片的透明度，黑白，圖片亮度等調節。簡單地說完之后，我們來動手創建一個簡單的圖片編輯器。原文來自：https://jellybool.com/post/build-a-simple-image-editor-with-css-js demo: https://jellybool.com/demo/i...

NSFish 2019-08-22 10:57 評論0 收藏0
css filter濾鏡的實例講解

摘要：由于的濾鏡可以實現對對普通圖像和圖像進行特效渲染功能十分強大所以今天特意把濾鏡的用法進行大致的總結語法灰度屬性可填寫范圍默認值為即灰度不改變上面介紹了第一種濾鏡灰度下面介紹接下來的九種濾鏡高斯模糊使用該方法將周圍像素點值求和取平均即為該由于css3的filter濾鏡可以實現對對普通圖像和SVG圖像進行特效渲染,功能十分強大,所以今天特意把filter濾鏡的用法進行大致的總結語法: ...

周國輝 2019-08-30 13:01 評論0 收藏0