【css3滤镜Filter使用】的更多相关文章

CSS3 滤镜Filter亮度动画

CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .img{ background: url(http://weiqunwang.…

css3滤镜Filter使用

Filter主要用于图片,SVG等元素上,其默认值是none,有以下10个filter-function值可选: grayscale(灰度)效果类似于PS中的去色或者黑白 blur(模糊)效果类似于PS中的高斯模糊 invert(反相)效果类似于PS中的反相 opacity(透明度)效果类似于PS中的图层不透明度 saturate(饱和度)效果类似于PS中的饱和度 brightness(亮度)效果类似于PS中的亮度 contrast(对比度)效果类似于PS中的对比度 drop-shadow(阴影…

CSS3滤镜filter浅析

在实现特定显示效果的页面中,css的filter属性是一种强大的工具.它能让我们的页面更加地个性化并减少PS方面的工作.filter的属性值主要有以下十种: blur grayscale sepia saturate hue-rotate invert brightness contrast opacity drop-shadow 本文使用的图片如下: 一.blur属性.blur的使用格式一般为 filter: blur(1px); -webkit-filter: blur(1px): 该属性用…

Filter Effects - 使用 CSS3 滤镜处理图片

CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果.这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理效果,例如灰度,模糊,饱和,老照片等. 立即体验 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 j…

CSS3的滤镜filter属性

css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightness(%)亮度 三.contrast(%)对比度 四.drop-shadow()阴影 注意: 这个 drop-shadow 与 box-shadow 都是在说阴影,但还是有区别的,看下图 图中火焰的图片,是一张png图片,除了火焰以外,其他部分是透明的,我们能看见,box-shadow 是给整个图片加…

CSS3的filter用法

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇.细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效.不过有一点大家需要特别的注意:此处的CSS3 filter和css filter完全是两样东东.更不是我们一直说的IE滤镜…

CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜.JS+DIV或VML处理!本篇为先占个坑,以后慢慢填^_^!!! CSS3 Filter兼容性表 SVG effect for HTML兼容…

使用CSS3滤镜让图片反转颜色

CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如何使用和转化图片呢?今天我们主要是来讲讲如何使用CSS3滤镜让图片反转颜色. CSS代码 invert滤镜就是为了设置元素的反色效果,他的值设置范围为:0-100%,100%为完全反色,0为显示正常的颜色. .normal {     filter: invert(0%); } .inverted…

CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜.JS+DIV或VML处理!本篇为先占个坑,以后慢慢填^_^!!! CSS3 Filter兼容性表 SVG effect for HTML兼容…

【CSS3】CSS3 滤镜实现

作者:^_^肥仔John      来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜.JS+DIV或VML处理! 本篇只做CS…

CSS3 滤镜学习

html篇 样式篇 grayscale sepia saturate hue-rotate invert opactiy brightness contrast blur drop-shadow 综合小效果 总结 A CSS filter is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have dif…

CSS3 之filter毛玻璃效果弹窗

先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <me…

学习笔记：CSS3的filter属性

CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 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: i…

tiltShift.js - CSS3 滤镜实现移轴镜头效果

tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 效果演示      插件下载 HTML 示例: <img src="url" class="tiltshift" data-position="50" data-blur=&…

兼容ie8 rgba()用法 滤镜filter的用法

原文  http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到ie8.这个就有点蛋疼了.因为ie8不支持rgba()函数.下面我们总结一下rgba()函数的含义. rgba的含义,r代表red,g代表green,b代表blue,红绿蓝…

在ie中用滤镜 (filter:progid:DXImageTransform.Microsoft.gradient)会触发overflow:hidden？

1.在ie中用滤镜 (filter:progid:DXImageTransform.Microsoft.gradient)会触发overflow:hidden 在项目中做一个背景层透明内容(菜单)不透明的效果,不想用图片做所以用rgba配合ie滤镜一起用: 刚开始也没什么问题,等把二级菜单做出来的时候(二级菜单会超出透明背景层),在ie789中就会把超出透明层的区域给遮盖掉: 经排查是因为用了ie滤镜,难道是ie滤镜会触发overflow:hidden?? firefox,chrome及ie10…

CSS3滤镜

今天在办公室亲眼目睹了同事使用CSS3滤镜为一张漂亮的照片轮廓加上了阴影,瞬间亮瞎了我的的双眼,见笑了. 所以也迅速尝试使用CSS3滤镜让最新出炉的MUI LOGO也性感一把,试图来愉悦一下大家的双眼. 已经等不及了,赶紧奉上今天的测试结果. CSS3滤镜包括了以下几种:只取其一,同时存在时,后边覆盖前边. 原图 第一种:图片灰度-webkit-filter:grayscale(1);/*值为从0 – 1*/ 第二种:褐色-webkit-filter:sepia(1);/*值为从0 – 1*/…

关于CSS3的filter(滤镜) 属性

修改所有图片或者元素的颜色为黑白 (100% 灰度) DOM{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); }…

CSS3 滤镜

了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生,CSS3对各种滤镜效果有了支持,可以做出很多好玩儿效果,走马观花了解一下 语法 filter: function(param); 很很多CSS3属性一样,监狱支持情况需要使用浏览器前缀,CSS滤镜支持的方法有 grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert 反色 opacity 透明度 brightness 亮度 contrast 对比度 blur 模糊 drop-shad…

css3中filter的各种特效

css3中的filter属性可以说是简单易用且强大,这些效果作用在图片上实现一些特效(也可以作用在vidio上,此处只讨论图片特效). 浏览器兼容性 目前各大浏览器对于css3的兼容已经非常好了,最新版本都可以支持css3,老版本的ie9以下的还是不支持,不过这不是重点,微软都准备放弃这些老古董了.另外ie的滤镜也是可以做到的,会另加讨论. 现在规范中支持的效果有: grayscale 灰度               值为0-1之间的小数 sepia 褐色   值为0-1之间的小数 satur…

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

转载,原文见:http://blog.csdn.net/freshlover/article/details/17143341 CSS3的透明度属性opacity想必大家都已经用的无处不在了.而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,这个估计谁都会写,但是涉及到filter的具体语法含义和各版本写法的不同区别,很多人都搞不准确,我曾经问过许多群里的大牛,说的都不是很准确,网上的说法就更五花八门了.今天呢,主要是重新温习一下这个属性,并实际测试来说明正确的写法,和IE各版…

烦人的IE7、8,半透明滤镜(filter:alpha)失效、png半透明失效的解决办法

在项目中的问题,之前用的是用IETest测试IE7,8发现背景透明设置无效,后来找文章解决!看了一些资料,做下总结. 几种IE半透明CSS样式 IE8里可以这样写 -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=50)”; IE7里可以这样写 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); IE6,IE7,IE8里都可以这样写 filter:alpha(…

关于css3 中filter的各种特效

做项目时遇到了一个有趣的css特效. 目前各大浏览器对于css3的兼容已经非常好了,最新版本都可以支持css3,老版本的ie9以下的还是不支持,不过这不是重点,微软都准备放弃这些老古董了. 现在规范中支持的效果有: grayscale 灰度 值为0-1之间的小数 sepia 褐色 值为0-1之间的小数 saturate 饱和度 值为num hue-rotate 色相旋转 值为angle invert 反色 值为0-1之间的小数 opacity 透明度 值为0-1之间的小数 brightness…

CSS3滤镜(filter--CSS3技术

filter 属性定义了元素(通常是<img>)的可视效果,例如图片的模糊.饱和度.灰度等……个人感觉功能很强大 1.filter的语法 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 2.各大浏览器当前时间的支持情况(来自Can I use:h…

CSS透明opacity和IE各版本透明度滤镜filter的准确用法

滤镜名    说明 Alpha     让HTML元件呈现出透明的渐进效果Blur     让HTML元件产生风吹模糊的效果Chroma     让图像中的某一颜色变成透明色DropShadow     让HTML元件有一个下落式的阴影FlipH     让HTML元件水平翻转FlipV     让HTML元件垂直翻转Glow     在元件的周围产生光晕而模糊的效果Gray     把一个彩色的图片变成黑白色Invert     产生图片的照片底片的效果Light     在HTML元件上放置…

csc_滤镜filter和实现透明的两种方式

有这样一个需求,给一个地图实现半透明效果. 使用css滤镜属性可以实现:filter. 下面是属性的所以值 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); <!DOCTYPE html> <html> <head> <…

FFMPEG 最简滤镜filter使用实例（实现视频缩放，裁剪，水印等）

FFMPEG官网给出了FFMPEG 滤镜使用的实例,它是将视频中的像素点替换成字符,然后从终端输出.我在该实例的基础上稍微的做了修改,使它能够保存滤镜处理过后的文件.在上代码之前先明白几个概念: Filter:代表单个filter     FilterPad:代表一个filter的输入或输出端口,每个filter都可以有多个输入和多个输出,只有输出pad的filter称为source,只有输入pad的filter称为sink     FilterLink:若一个filter的输出pad和另一个f…

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

支持Chrome: 暂不支持浏览器:FF,IE... 希望后者努力 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFteXM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""> CSS: <style type="text/css"> @-webkit-keyfra…

关于css3属性filter

今天看百度百科,看到其中一页所有图片背景全都设置为了灰白色,于是研究了番,发现是应用了filter滤镜这个属性. // 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } 其中还有毛玻璃属性:blur // 图片使用高斯模糊效果: img { -webkit-filter: blur(5px); /* Chrome…

滤镜 filter：gray 变灰色

.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }…