你所不知道的CSS滤镜技巧与细节

本文重要介绍 CSS 滤镜的不常用用法，欲望能给读者带来一些干货!

零丁将两个滤镜拿出来，它们的感化分别是：

filter: blur()：给图像设置高斯模糊效不雅。
filter: contrast()：调剂图像的比较度。

OK，下面直接进入正文。本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的滤镜，语法如下，还未接触过这个属性的可以先简单到 MDN — filter 懂得下：

{ 
    filter: blur(5px); 
    filter: brightness(0.4); 
    filter: contrast(200%); 
    filter: drop-shadow(16px 16px 20px blue); 
    filter: grayscale(50%); 
    filter: hue-rotate(90deg); 
    filter: invert(75%); 
    filter: opacity(25%); 
    filter: saturate(30%); 
    filter: sepia(60%); 
  
    /* Apply multiple filters */ 
    filter: contrast(175%) brightness(3%); 
  
    /* Global values */ 
    filter: inherit; 
    filter: initial; 
    filter: unset; 
}

.avator { 
    position: relative; 
    background: url($img) no-repeat center center; 
    background-size: 100% 100%; 
     
    &::after { 
        content: ""; 
        position: absolute; 
        top: 10%; 
        width: 100%; 
        height: 100%; 
        background: inherit; 
        background-size: 100% 100%; 
        filter: blur(10px) brightness(80%) opacity(.8); 
        z-index: -1; 
    } 
}

根本用法

你可以经由过程 hover 撤消滤镜，不雅察该滤镜的效不雅。

简单来说，CSS 滤镜就是供给类似 PS 的图形特效，像模糊，锐化或元素变色等功能。平日被用于调剂图片，背景和界线的衬着。本文就会环绕这些滤久魅展开，看看具体能怎么应用或者玩出什么花活。

CodePen Demo — filter create shadow(https://codepen.io/Chokcoco/pen/eGYYpo)

常用用法

1/3 1 2 3 下一页尾页

　　推荐阅读

　　如何科学地蹭热点：用python爬虫获取热门微博评论并进行情感分析

然后我赶紧去存眷了一下比来老薛的消息…在感触感染了剧情的复杂和案情的扑朔迷离之后…我默默地进修了若何浏览合同…若何应用ELA分析图片…若何写作文…若>>>详细阅读

本文标题：你所不知道的CSS滤镜技巧与细节

地址：http://www.17bianji.com/lsqh/37762.html

1/2 1