最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 opacity: 0.5;      filter:alpha(Opacity=50); } 1.filter:对IE设置半透明滤镜效果,filter:alpha( Opacity=50)代表该对象50%半透明,支持IE8及以下浏览器.2.opacity:css3属性,对除IE外所有浏览器支持包括…

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

原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). 默认值 none 继承 no 动画支持 是.详细可查阅 CSS 动画 版本 CSS3 浏览器支持 表格中的数字表示支持该方法的第一个浏览器的版本号. 紧跟在数字后面的 -webkit- 为指定浏览器的前缀. 属性 filter 18.0 -webkit- 不支持 35.0 6.0 -webki…

在网站加入友情链接的LOGO时,因为不同logo颜色的问题,和主题色调可能产生冲突, 我选择用CSS3滤镜让logo变黑白,hover时变回原本的彩色 CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;…

filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75). Filter 描述 none 默认值,没有效果. blur(px) 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊: 如果没有设定值,则默认是0:这个参数可设置css长度值,但不接受百分比值. brightness(…

实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(%); /* Chrome, Safari, Opera */ filter: grayscale(%); } 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). 浏览器支持 表格中的数字表示支持该方法的第一个浏览器的版本号. 紧跟在数字后面的 -webkit- 为指定浏览器的前缀. 注意: 旧版 Internet Explorer…

http://www.zhanxin.info/development/2012-12-19-css-filter.html…

filter 属性定义了元素(通常是<img>)的可视效果 语法: object.style.WebkitFilter="grayscale(100%)" 小栗子: 修改所有图片的颜色为黑白 (100% 灰度): img {    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */    filter: grayscale(100%);} 图片使用高斯模糊效果: img {    -webkit-filt…

CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url(gray.svg#grayscale); filter: gray; } HTML代码: <img src="http://image.zhangxi…

1. 使整个页面的图片都变成灰色的,代码如下. html{     font-size: 100%;     -webkit-text-size-adjust: none;    -ms-text-size-adjust: none;    filter: grayscale(100%);     -webkit-filter: grayscale(100%);     -moz-filter: grayscale(100%);     -ms-filter: grayscale(100%);…