成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS中filter屬性的使用

Darkgel / 3614人閱讀

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

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

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

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

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)用一種線性乘法，使其看起來(lái)更亮或更暗。如果值是0%，圖像會(huì)全黑。值是100%，則圖像無(wú)變化。其他的值對(duì)應(yīng)線性乘數(shù)效果。值超過(guò)100%也是可以的，圖像會(huì)比原來(lái)更亮。如果沒(méi)有設(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);
}

  
給圖像一種線性乘法使看起來(lái)更亮或者更暗。值為0圖像全黑；值超過(guò)100%圖像更亮

  
    
    
  • brightness
    • 
    
  • brightness
    • 
    
  • brightness
    •
contrast

調(diào)整圖像的對(duì)比度。值是0%的話，圖像會(huì)全黑。值是100%，圖像不變。值可以超過(guò)100%，意味著會(huì)運(yùn)用更低的對(duì)比。若沒(méi)有設(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)整圖像對(duì)比度。值為0，圖像全黑；值超過(guò)100%會(huì)運(yùn)用更低的對(duì)比

  
    
    
  • contrast
    • 
    
  • contrast
    • 
    
  • contrast
    •
graycale

將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無(wú)變化。值在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圖像無(wú)變化；值為100%完全轉(zhuǎn)換為灰度圖像

  
    
    
  • grayscale
    • 
    
  • grayscale
    • 
    
  • grayscale
    •
hue-rotate

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

  
    
    
  • huerotate
    • 
    
  • huerotate
    • 
    
  • huerotate
    •
invert

反轉(zhuǎn)輸入圖像。值定義轉(zhuǎn)換的比例。100%的價(jià)值是完全反轉(zhuǎn)。值為0%則圖像無(wú)變化。值在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%圖像無(wú)變化，100%圖像完全反轉(zhuǎn)

  
    
    
  • invert
    • 
    
  • invert
    • 
    
  • invert
    •
opacity

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

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%圖像無(wú)變化

  
    
    
  • opacity
    • 
    
  • opacity
    • 
    
  • opacity
    •
saturate

轉(zhuǎn)換圖像飽和度。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和，值為100%則圖像無(wú)變化。其他值，則是效果的線性乘子。超過(guò)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%圖像無(wú)變化。值在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%圖像無(wú)變化

  
    
    
  • sepia
    • 
    
  • sepia
    • 
    
  • sepia
    •
drop-shadow

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

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
    •

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114024.html

相關(guān)文章

  • 不得不收藏的——IE中CSS-filter濾鏡小知識(shí)大全

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

    yuanzhanghu 評(píng)論0 收藏0

  • CSS中filter屬性的使用

    摘要：屬性定義了元素的可視效果給圖像設(shè)置高斯模糊。值為圖像全黑值超過(guò)圖像更亮調(diào)整圖像的對(duì)比度。一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。的價(jià)值是完全反轉(zhuǎn)。超過(guò)的值是允許的，則有更高的飽和度。值為則完全是深褐色的，值為圖像無(wú)變化。 filter 屬性定義了元素的可視效果 blur 給圖像設(shè)置高斯模糊。radius一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊。 如果沒(méi)有...

    EsgynChina 評(píng)論0 收藏0

  • 用CSS和JS打造一個(gè)簡(jiǎn)單的圖片編輯器

    摘要：原文來(lái)自效果圖本文主要是利用的和簡(jiǎn)單的代碼來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片編輯器，包括對(duì)圖片的透明度，黑白，圖片亮度等調(diào)節(jié)。簡(jiǎn)單地說(shuō)完之后，我們來(lái)動(dòng)手創(chuàng)建一個(gè)簡(jiǎn)單的圖片編輯器。 原文來(lái)自：https://jellybool.com/post/build-a-simple-image-editor-with-css-js demo: https://jellybool.com/demo/i...

    jerryloveemily 評(píng)論0 收藏0

  • 用CSS和JS打造一個(gè)簡(jiǎn)單的圖片編輯器

    摘要：原文來(lái)自效果圖本文主要是利用的和簡(jiǎn)單的代碼來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片編輯器，包括對(duì)圖片的透明度，黑白，圖片亮度等調(diào)節(jié)。簡(jiǎn)單地說(shuō)完之后，我們來(lái)動(dòng)手創(chuàng)建一個(gè)簡(jiǎn)單的圖片編輯器。 原文來(lái)自：https://jellybool.com/post/build-a-simple-image-editor-with-css-js demo: https://jellybool.com/demo/i...

    NSFish 評(píng)論0 收藏0

  • css filter濾鏡的實(shí)例講解

    摘要：由于的濾鏡可以實(shí)現(xiàn)對(duì)對(duì)普通圖像和圖像進(jìn)行特效渲染功能十分強(qiáng)大所以今天特意把濾鏡的用法進(jìn)行大致的總結(jié)語(yǔ)法灰度屬性可填寫范圍默認(rèn)值為即灰度不改變上面介紹了第一種濾鏡灰度下面介紹接下來(lái)的九種濾鏡高斯模糊使用該方法將周圍像素點(diǎn)值求和取平均即為該 由于css3的filter濾鏡可以實(shí)現(xiàn)對(duì)對(duì)普通圖像和SVG圖像進(jìn)行特效渲染,功能十分強(qiáng)大,所以今天特意把filter濾鏡的用法進(jìn)行大致的總結(jié) 語(yǔ)法: ...

    周國(guó)輝 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<