filter 图片滤镜 给当前元素加滤镜_改变它的明亮度

  定义:filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。作用在图片上或元素上。div{ },或 div img{ }结果是一样的。

1、 brightness()明亮度-->0-1 1为自己本身的两度

 div{
-webkit-filter:brightness(.5)
} div img{
-webkit-filter:brightness(.5)
}

2、grayscale()灰度 取值0-1

  div img{
-webkit-filter:grayscale(.5)
}

3、饱和度 是大于等于0的

 div img{
-webkit-filter:saturate(1);/**/
}

4、做旧,褐色

 div img{
-webkit-filter:sepia(6);/**/
}

5、色相旋转

 div img{
-webkit-filter:hue-rotate(90deg);/**/
}

6、反色 取值范围0-1

  div img{
-webkit-filter:invert(1);/**/
}

7、透明度

 div img{
-webkit-filter:opacity(.2);/**/
}

8、对比度 取值范围大于等于0

 div img{
-webkit-filter:contrast(2);/**/
}

9、模糊值 单位是像素

 div img{
-webkit-filter:blur(50px);/**/
}

10、阴影值 有四个属性值,x,y ,阴影模糊度,模糊的颜色

注:可以设置多个属性,之间用空格分隔。好多浏览器都不支持,比如IE,Google是支持的

可多个样式,之间用空格分隔。

 div img{
-webkit-filter:drop-shadow(5px 5px 5px #ccc)
blur(50px) contrast(2) ;/**/
}

filter 图片滤镜的各种设置的更多相关文章

  1. HTML5----CSS3图片滤镜(filter)特效

    支持Chrome: 暂不支持浏览器:FF,IE... 希望后者努力 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFteXM=/font/5a ...

  2. Atitit (Sketch Filter)素描滤镜的实现  图像处理  attilax总结

    Atitit (Sketch Filter)素描滤镜的实现  图像处理  attilax总结 1.1. 素描滤镜的实现方法比较简单,这里我们直接写出算法过程如下:1 1.2. 颜色减淡COLOR_DO ...

  3. CSS3 filter:drop-shadow滤镜与box-shadow区别应用 抄的

    CSS3 filter:drop-shadow滤镜与box-shadow区别应用 这篇文章发布于 2016年05月18日,星期三,01:07,归类于 css相关. 阅读 5777 次, 今日 12 次 ...

  4. 【转载】CSS3 filter:drop-shadow滤镜与box-shadow区别应用

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  5. CSS3 filter 模糊滤镜的应用

    CSS3 filter 模糊滤镜的应用   在segmentfault上回答过的一个问题,如何将网页CSS背景图高斯模糊且全屏显示当时没有深入了解,只觉得滤镜应该只是应用于图片上的.而且各大网站的de ...

  6. android全功能音乐播放器、基于MVP-Clean + Weex + RxJava2 + Retrofit + Dagger2 + MTRVA的综合应用、图片滤镜处理等源码

    Android仿微信朋友圈查看图片下拽返回. Android图片滤镜处理,相机滤镜处理效果源码 Android自定义View源码:一个水平的进度条 基于MVP-Clean + Weex + RxJav ...

  7. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  8. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  9. nginx系统真正有效的图片防盗链完整设置详解

    原文:http://www.wufangbo.com/nginx-fang-dao-lian/ 关于nginx防盗链的方法网上有很多教程,都可以用,但是我发现很多教程并不完整,所做的防盗链并不是真正的 ...

随机推荐

  1. ruby-程序员最好的朋友

    ruby一门开源的动态编程语言,注重简洁和效率.Ruby 的句法优雅,读起来自然,写起来舒适. 介绍 这是个不会超过20分钟的 Ruby 简介.阅读前请您先将 Ruby 安装好.(如果您还没有安装Ru ...

  2. git命令图

  3. awk单行脚本快速参考

    AWK单行脚本快速参考 2008年4月28日编辑: Eric Pement eric [at] pement.org 版本 0.26翻译: 董一粟 yisudong [at] gmail.com 最新 ...

  4. 入门级 - 码云(Gitee),GitHub 教程

    这篇文章的目的是记录我的关于GitHub的内容,从注册.下载直到设置成功每一步都有解释,其中有一些截图或者代码来自于网络. GitHub和码云均基于Git,所以两者的操作方法基本一致,只需要学习其中一 ...

  5. Python学习---Python数据类型1206

    1.1. 字符串格式化 字符格式化输出 占位符 %s  s = string %d  d = digit 整数 %f   f = float 浮点数,约等于小数 #version: python3.2 ...

  6. Java学习---Excel读写操作

    1.1.1. 简介 Apache POI 使用Apache POI 完成Excel读写操作 Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API ...

  7. chrome最新版49跨域问题

    chrome最新版49跨域问题   一.最新版49要用新的参数 加--user-data-dirwindows:"C:\Program Files\Google\Chrome\Applica ...

  8. HTTP之Response状态码

    Status-Code - 1xx: Informational - Request received, continuing process - 2xx: Success - The action ...

  9. FZU-1608 Huge Mission 线段树(更新懒惰标记)

    题目链接: https://cn.vjudge.net/problem/FZU-1608 题目大意: 长度n,m次操作:每次操作都有三个数:a,b,c:意味着(a,b]区间单位长度的价值为c,若某段长 ...

  10. 劳动节前得空半天-总结一下最近使用的LINUX命令

    一.搜索文件 1.locate xxx.log   全盘搜索xxx.log文件 2.which java       查找命令 3.ll  xxx.log         在目录下查找文件 二.搜索内 ...