1. 当前所在位置:
  2. 首页
  3. 捕鱼大师

CSS3 filter(滤镜) 属性

2018-12-28 admin
  CSS3 filter(滤镜) 属性实例
 
  修改所有图片的颜色为黑白(100%灰度):
 
  img{
 
  -webkit-filter:grayscale(100%);/*Chrome,Safari,Opera*/
 
  filter:grayscale(100%);
 
  }
 
  尝试一下»
 
  定义和使用
 
  filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
 
  默认值: none
 
  继承: no
 
  动画支持: 是。详细可查阅CSS动画
 
  版本: CSS3
 
  JavaScript语法: object.style.WebkitFilter="grayscale(100%)"尝试一下»
 
  浏览器支持
 
  表格中的数字表示支持该方法的第一个浏览器的版本号。
 
  紧跟在数字后面的-webkit-为指定浏览器的前缀。
 
  属性
 
  filter 18.0-webkit- 不支持 35.0 6.0-webkit- 15.0-webkit-
 
  注意:旧版InternetExplorer浏览器(4.0to8.0)支持的非标准"filter"属性已被废弃。IE8及更低版本浏览器通常使用opacity属性。
 
  CSS语法
 
  filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
 
  提示:使用空格分隔多个滤镜。
 
  Filter函数
 
  注意:滤镜通常使用百分比(如:75%),当然也可以使用小数来表示(如:0.75)。
 
  Filter 描述
 
  none 默认值,没有效果。
 
  blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起,所以值越大越模糊;
 
  如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
 
  brightness(%) 给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。
 
  contrast(%) 调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
 
  drop-shadow(h-shadowv-shadowblurspreadcolor)
 
  给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。函数接受<shadow>(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadowbox-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下:
 
  <offset-x><offset-y>(必须)
 
  这是设置阴影偏移量的两个<length>值.<offset-x>设定水平方向距离.负值会使阴影出现在元素左边.<offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.
 
  如果两个值都是0,则阴影出现在元素正后面(如果设置了<blur-radius>and/or<spread-radius>,会有模糊效果).
 
  <blur-radius>(可选)
 
  这是第三个code><length>值.值越大,越模糊,则阴影会变得更大更淡.不允许负值若未设定,默认是0(则阴影的边界很锐利).
 
  <spread-radius>(可选)
 
  这是第四个<length>值.正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0(阴影会与元素一样大小).
 
  注意:Webkit,以及一些其他浏览器不支持第四个长度,如果加了也不会渲染。
 
  <color>(可选)
 
  查看<color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko(Firefox),Presto(Opera)和Trident(InternetExplorer)中,会应用colorcolor属性的值。另外,如果颜色值省略,WebKit中阴影是透明的。
 
  grayscale(%)
 
  将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
 
  hue-rotate(deg)
 
  给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
 
  invert(%)
 
  反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。若值未设置,值默认是0。
 
  opacity(%)
 
  转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
 
  saturate(%)
 
  转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。若值未设置,值默认是1。
 
  sepia(%)
 
  将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
 
  url()
 
  URL函数接受一个XML文件,该文件设置了一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。
 
  例如:
 
  filter:url(svg-url#element-id)
 
  initial
 
  设置属性为默认值,可参阅:CSSinitial关键字
 
  inherit 从父元素继承该属性,可参阅:CSSinherit关键字
 
  Examples
 
  更多实例
 
  模糊实例
 
  图片使用高斯模糊效果:
 
  img{
 
  -webkit-filter:blur(5px);/*Chrome,Safari,Opera*/
 
  filter:blur(5px);
 
  }
 
  尝试一下»
 
  Brightness函数实例
 
  使图片变亮:
 
  img{
 
  -webkit-filter:brightness(200%);/*Chrome,Safari,Opera*/
 
  filter:brightness(200%);
 
  }
 
  尝试一下»
 
  Contrast函数实例
 
  调整图像的对比度:
 
  img{
 
  -webkit-filter:contrast(200%);/*Chrome,Safari,Opera*/
 
  filter:contrast(200%);
 
  }
 
  尝试一下»
 
  drop-shadow函数实例
 
  给图像设置一个阴影效果:
 
  img{
 
  -webkit-filter:drop-shadow(8px8px10pxred);/*Chrome,Safari,Opera*/
 
  filter:drop-shadow(8px8px10pxred);
 
  }
 
  尝试一下»
 
  Grayscale函数实例
 
  将图像转换为灰度图像:
 
  img{
 
  -webkit-filter:grayscale(50%);/*Chrome,Safari,Opera*/
 
  filter:grayscale(50%);
 
  }
 
  尝试一下»
 
  hue-rotate()函数实例
 
  给图像应用色相旋转:
 
  img{
 
  -webkit-filter:hue-rotate(90deg);/*Chrome,Safari,Opera*/
 
  filter:hue-rotate(90deg);
 
  }
 
  尝试一下»
 
  Invert函数实例
 
  反转输入图像:
 
  img{
 
  -webkit-filter:invert(100%);/*Chrome,Safari,Opera*/
 
  filter:invert(100%);
 
  }
 
  尝试一下»
 
  Opacity函数实例
 
  转化图像的透明程度:
 
  img{
 
  -webkit-filter:opacity(30%);/*Chrome,Safari,Opera*/
 
  filter:opacity(30%);
 
  }
 
  尝试一下»
 
  Saturate函数实例
 
  转换图像饱和度:
 
  img{
 
  -webkit-filter:saturate(800%);/*Chrome,Safari,Opera*/
 
  filter:saturate(800%);
 
  }
 
  尝试一下»
 
  Sepia函数实例
 
  将图像转换为深褐色:
 
  img{
 
  -webkit-filter:sepia(100%);/*Chrome,Safari,Opera*/
 
  filter:sepia(100%);
 
  }
 
  尝试一下»
 
  复合函数
 
  使用多个滤镜,每个滤镜使用空格分隔。
 
  注意:顺序是非常重要的(例如使用grayscale()后再使用sepia()将产生一个完整的灰度图片)。
 
  img{
 
  -webkit-filter:contrast(200%)brightness(150%);/*Chrome,Safari,Opera*/
 
  filter:contrast(200%)brightness(150%);
 
  }
 
  尝试一下»
 
  所有滤镜实例
 
  以下实例演示了所有滤镜的使用方法:
 
  .blur{
 
  -webkit-filter:blur(4px);
 
  filter:blur(4px);
 
  }
 
  .brightness{
 
  -webkit-filter:brightness(0.30);
 
  filter:brightness(0.30);
 
  }
 
  .contrast{
 
  -webkit-filter:contrast(180%);
 
  filter:contrast(180%);
 
  }
 
  .grayscale{
 
  -webkit-filter:grayscale(100%);
 
  filter:grayscale(100%);
 
  }
 
  .huerotate{
 
  -webkit-filter:hue-rotate(180deg);
 
  filter:hue-rotate(180deg);
 
  }
 
  .invert{
 
  -webkit-filter:invert(100%);
 
  filter:invert(100%);
 
  }
 
  .opacity{
 
  -webkit-filter:opacity(50%);
 
  filter:opacity(50%);
 
  }
 
  .saturate{
 
  -webkit-filter:saturate(7);
 
  filter:saturate(7);
 
  }
 
  .sepia{
 
  -webkit-filter:sepia(100%);
 
  filter:sepia(100%);
 
  }
 
  .shadow{
 
  -webkit-filter:drop-shadow(8px8px10pxgreen);
 
  filter:drop-shadow(8px8px10pxgreen);
捕鱼驾到