国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css filter濾鏡的實例講解

周國輝 / 1259人閱讀

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

由于css3的filter濾鏡可以實現(xiàn)對對普通圖像和SVG圖像進行特效渲染,功能十分強大,所以今天特意把filter濾鏡的用法進行大致的總結(jié)

語法:

element {
        filter: none |  [  ]* 
      }
        


.grayscale {
    filter: graycale(1);
    //灰度屬性
    //可填寫范圍0~1,默認值為0,即灰度不改變
}

上面介紹了第一種濾鏡: grayscale(灰度)

下面介紹接下來的九種濾鏡

2.blur()高斯模糊

使用:該方法將周圍像素點值求和取平均即為該點像素值
參數(shù):此屬性接受參數(shù)接受長度值,默認值為0

.blur {
    filter: blur(1px)
}

效果:

3.brightness()亮度

使用: 該方法調(diào)節(jié)圖片的亮度
參數(shù): 默認值為1,但所填寫值可以大于1,此時圖像亮度會繼續(xù)增強

.brightness {
    filter: brightness(0.6)
}

效果圖:

4.contrast對比度

使用: 通過調(diào)節(jié)對比度使亮處更亮,暗處更暗
參數(shù): 默認值為1,最小值為0,無最大值

.contrast{
    filter: contrast(150%)
}

效果圖:

5.drop-shadow設(shè)置陰影

使用: 使用效果與box-shadow類似,但瀏覽器可能會提供加速
參數(shù): 第一二個值是偏移量(允許負值) , 第三個參數(shù)表示模糊程度(不允許負值),第四個參數(shù)表示顏色

.drop-shadow{
    filter: drop-shadow(20px, 20px, 10px, black)
}

效果圖:

6.hue-rotate色相

使用: 用于改變色相(即具體像素的數(shù)值)
參數(shù): 用角度表示,當數(shù)值為360deg時,圖像不變

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

效果圖:

7.invert()圖像反轉(zhuǎn)

使用: 對圖像進行顏色上的反轉(zhuǎn)
參數(shù): 默認值是0,最大值是1

.invert{
    filter: invert(100%)
}

效果圖:

8.opacity透明度

使用: 此樣式類似于opacity屬性
參數(shù): 0%~100%

.opacity {
    filter: opacity(50%)    
}

效果圖:

9.saturate()飽和度

使用: 轉(zhuǎn)換圖像飽和度
參數(shù): 默認值是100%, 但超過100%的值是允許的

.saturate{
    filter: saturate(200%)
}

效果圖:

![    圖片描述][9]

10.sepia褐色加深(會產(chǎn)生一種老照片的感覺)

使用: 將圖像轉(zhuǎn)換為褐色
參數(shù): 默認值為0,范圍是0~1

.sepia{
    filter: sepia(100%)
}

效果圖

11.進行圖像的復(fù)合處理,可以對圖像進行任意的組合以獲得想要的結(jié)果

.mixture{
    filter:brightness(1.2) contrast(1.2)
}

效果圖:

通過filter屬性你可以把你喜歡的圖片非常容易地修改成易用的樣式

......往往會把一件完整的東西化成無數(shù)的形象,就像凹凸鏡一般,從正面望去,只見一片模糊.


???????????????????????--莎士比亞

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115251.html

相關(guān)文章

  • CSS 火焰？不在話下

    摘要：下圖是我鼓搗到另外一個小，當?shù)皆氐臅r候，產(chǎn)生火焰效果嗯，這些其實都是對濾鏡及混合模式的一些搭配運用。主要幾個屬性默認大家已經(jīng)掌握了大概，閱讀后可以自行去了解補充更多細節(jié)更多精彩技術(shù)文章匯總在我的，持續(xù)更新，歡迎點個訂閱收藏。正文從下面開始。 今天的小技巧是使用純 CSS 生成火焰，逼真一點的火焰。 嗯，長什么樣子？在 CodePen 上輸入關(guān)鍵字?CSS Fire，能找到這樣的： 或者...

    Cciradih 評論0 收藏0

  • CSS 火焰？不在話下

    摘要：今天的小技巧是使用純生成火焰，逼真一點的火焰。如上圖，整個蠟燭的骨架，除去火焰的部分很簡單，掠過不講。利用上述，我們要先生成一個類似火焰形狀的三角形。 正文從下面開始。 今天的小技巧是使用純 CSS 生成火焰，逼真一點的火焰。 嗯，長什么樣子？在 CodePen 上輸入關(guān)鍵字 CSS Fire，能找到這樣的： showImg(https://segmentfault.com/img/...

    olle 評論0 收藏0

  • CSS 濾鏡技巧與細節(jié)

    摘要：簡單來說，濾鏡就是提供類似的圖形特效，像模糊，銳化或元素變色等功能。常用用法既然是標題是你所不知道的技巧與細節(jié)，那么比較常用的一些用法就不再贅述，通常我們見得比較多的濾鏡用法有使用生成毛玻璃效果使用生成整體陰影效果使用生成透明度本文主要介紹 CSS 濾鏡的不常用用法，希望能給讀者帶來一些干貨！ 注意：ie不兼容 本文所描述的濾鏡，指的是 CSS3 出來后的濾鏡，不是 IE 系列時代的濾鏡，話...

    tinylcy 評論0 收藏0

  • 簡單說 CSS濾鏡 filter屬性

    摘要：解釋的濾鏡，也就是屬性，主要有下面這幾個屬性值模糊亮度注意值是，圖像無變化。超過，變亮，小于，變暗。陰影注意這個與都是在說陰影，但還是有區(qū)別的，看下圖。簡單說通過的濾鏡實現(xiàn)火焰效果 說明 濾鏡主要是用來實現(xiàn)圖像的各種特殊效果，css的濾鏡是很神奇的。 解釋 css的濾鏡，也就是filter屬性，主要有下面這幾個屬性值 blur（模糊） showImg(https:/...

    klinson 評論0 收藏0

發(fā)表評論

0條評論

周國輝

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<