CSS3 filter滤镜
其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:
- grayscale灰度
- sepia褐色(求专业指点翻译)
- saturate饱和度
- hue-rotate色相旋转
- invert反色
- opacity透明度
- brightness亮度
- contrast对比度
- blur模糊
- drop-shadow阴影
模糊实例
图片使用高斯模糊效果:
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
使图片变亮:
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
CSS3 filter滤镜的更多相关文章
- 巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
- CSS3 filter(滤镜)
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.7 ...
- css3 filter(滤镜)属性汇总与使用介绍,来源W3C
实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(%); /* Chrome, Safari, Opera */ filter: g ...
- CSS3 filter(滤镜) 属性
filter 属性定义了元素(通常是<img>)的可视效果 语法: object.style.WebkitFilter="grayscale(100%)" 小栗子: 修 ...
- CSS3 filter:drop-shadow滤镜与box-shadow区别应用 抄的
CSS3 filter:drop-shadow滤镜与box-shadow区别应用 这篇文章发布于 2016年05月18日,星期三,01:07,归类于 css相关. 阅读 5777 次, 今日 12 次 ...
- css3中强大的filter(滤镜)属性
CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...
- CSS3 filter 模糊滤镜的应用
CSS3 filter 模糊滤镜的应用 在segmentfault上回答过的一个问题,如何将网页CSS背景图高斯模糊且全屏显示当时没有深入了解,只觉得滤镜应该只是应用于图片上的.而且各大网站的de ...
- CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...
- CSS3 Filter详解(改变模糊度 亮度 透明度等方法)
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...
随机推荐
- REUSE_ALV_POPUP_TO_SELECT使用技巧
可以实现弹出一个对话框,提供选择数据的功能…… 栗子1: CALL FUNCTION 'REUSE_ALV_POPUP_TO_SELECT' TYPE-POOLS slis. DATA: selec ...
- (四)HttpServletRequest对象(转)
转自“孤傲苍狼”博客. Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. request和response对象即 ...
- 单例模式-java
/** * The MIT License * Copyright (c) 2014-2016 Ilkka Seppälä * <p> * Permission is hereby gra ...
- 02.提交bug
写代码最烦的也就是修复bug了,虽然这个避无可避…………………… a. bug的严重级别设置 1级:影响主要流程 ->在bug 的影响下,主流程 测试无法向下进行 2级:影响核心功能 -> ...
- wordpress通过$wpdb获取一个分类下所有的文章
在wordpress程序根目录下新建一个php文件,粘贴下面的代码 如下面的代码注释,修改$CID这个分类id,就可以获取这个分类下的文章了.这个查询需要联合三个表wp_posts.wp_term_r ...
- react如何在网页上编辑并运行代码?
最近想做个能在网站,能在网页上运行代码,并且保存这个组件,看了一下element-react的组件和官方的实例,发现都是可以编辑运行的,因为之前没有这方面的经验,所以看下各位大佬能不能给点意见
- Spring 商品分类
实体商品示例代码 package cn.maxhou.entity; import java.io.Serializable; import java.math.BigDecimal; import ...
- 解决Maven依赖本地仓库eclipse报错的问题
一.应用场景 有时候项目报红色的感叹号错误也是由于项目中没有导入相关jar报导致报错 为了使用maven强大的包依赖管理和项目管理功能,故在项目中使用maven2作为项目建构工具. 但是我的项目在内网 ...
- Azure经典虚拟机(Windows)如何监测单个磁盘的使用空间
Azure云平台创建经典虚拟机(Windows)后,发现仪表板的监测项下默认是没有针对磁盘空间进行检测的指标的 本地机器安装Windows Azure Powershell模块,并通过如下命令登陆并查 ...
- windows下编译libevent(2.1.8)及使用
一:获取libevent github地址:https://github.com/libevent/libevent/releases 下载2.1.8稳定版 二:编译libevent 我是用的visu ...