Filters主要是运用在图片上，以实现一些特效。（也能运用于video上），类似滤镜效果
 
img {
        -webkit-filter:grayscale(1);
}   
 
grayscale灰度            下面大部分一样，默认值都为100%         
sepia褐色
saturate饱和度
hue-rotate色相旋转     默认值0deg
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊                  默认值0
drop-shadow阴影
 
 
 

CSS fliter的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 使用fliter实现ie下css中rgba的效果

    直接举例吧background-color: rgba(255,255,255,0.8); 设置背景颜色为白色,不透明度设为80% 在ie下可以用fliter这一属性进行设置: filter:prog ...

  3. css相关整理-其他

    1.设备像素(device pixel): 设备像素是物理概念,指的是设备中使用的物理像素.CSS像素(css pixel): CSS像素是Web编程的概念,指的是CSS样式代码中使用的逻辑像素.通过 ...

  4. Struts2的fliter与interceptor

    struts2   fliter与interceptor的区别 1.拦截器是基于java反射机制的,而过滤器是基于函数回调的.2.过滤器依赖于servlet容器,而拦截器不依赖于servlet容器.3 ...

  5. 常用前端布局，CSS技巧介绍

    常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...

  6. html标签和css基础语法与浏览器兼容性等相关基础学习

    <!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"& ...

  7. 10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！

    大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧

  8. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  9. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

随机推荐

  1. ASP.NET Core中如何调整HTTP请求大小的几种方式

    一.前言 一般的情况下,我们都无需调用HTTP请求的大小,只有在上传一些大文件,或者使用HTTP协议写入较大的值时(如调用WebService)才可能会调用HTTP最大请求值. 在ASP.NET Co ...

  2. JQuery获取图片大小并控制图片文件上传大小以及上图片文件时如何预览图片

    首先我们来看效果图: 点击上传之后如下: 在这里我获取到文件的大小,并且如果超出我设定的大小,则禁止上传! 不多说,上代码:先看div布局: <div class="imageCont ...

  3. Ubuntu16.04.1安装JDK1.8.0

    今天在安装Zookeeper的时候需要安装JDK,对于.Neter来说还是有点陌生,下面我就把安装JDK的步骤记录一下,分享给大家. 一.下载JDK安装包:http://www.oracle.com/ ...

  4. [Sdoi2010]星际竞速

    个人对山东省选已经十分无语了,做了三道题,都TM是费用流,这山东省选是要干什么,2009--2011连续三年,只要会费用流,然后建个边,跑一跑就过了. 10 年一度的银河系赛车大赛又要开始了.作为全银 ...

  5. IntelliJ IDEA 14.1.4设置关闭自动保存和标志改动文件为星号?

    一.设置取消默认的自动保存: 二.设置文件内容改动后为文件标题头部添加*号:

  6. vue2+webpack使用1--初识默认展示页面

    1 从安装好的展示 vue2+webpack项目开始 2 关键目录及文件 3 关系图 4 类比nodejs项目的理解   // src/main.js import Vue from 'vue' // ...

  7. Kindeditor JS 取值问题以及上传图片后回调等

    KindEditor.ready(function (K) { var editor = K.create('#editor_id', { //上传管理 uploadJson: '/js/kinded ...

  8. ubuntu6.04下安装Eclipse for C/C++ Development

    ubuntu6.04下安装Eclipse for C/C++ Development 首先安装gcc/g++ 需要安装jdk,有的可以尝试安装openjdk. sudo apt-get install ...

  9. CSS之 relative 特性

    1. 自身特性: 如left,right,top,bottom定位都是相对于自身位置定位. 当left与right同时存在,lfet生效. 当top与bottom同时存在,top生效. 无侵入,保留原 ...

  10. sublime Text 正则替换

    我遇到一个文章,需要把所有的 (数字) 换为 [数字] 于是我使用 Sublime Text的替换 首先,我们需要打开正则使用"Alt+R" 或打开"Ctrl+h&quo ...