Ⅰ CSS样式 过滤器的问题!
滤镜效果 | 功能描述
-----------------------------------------------
Alpha | 设置不同的透明度变化效果
-----------------------------------------------
Blur | 建立模糊效果
-----------------------------------------------
DropShadow| 建立一种偏移的影象轮廓，即投射阴影
-----------------------------------------------
FlipH | 水平翻转
-----------------------------------------------
FlipV | 垂直翻转
-----------------------------------------------
Glow | 为对象的边界增加色彩光效
-----------------------------------------------
Gray | 将图片以灰度形式显示
-----------------------------------------------
Invert | 将色彩、饱和度以及亮度值完全反转,类似底片效果
-----------------------------------------------
Light | 在一个对象上进行灯光投影
-----------------------------------------------
Mask | 为一个对象建立彩色透明遮罩
-----------------------------------------------
Shadow | 为对象建立轮廓的影效果
-----------------------------------------------
Wave | 在X轴和Y轴方向利用正弦波打乱图片
-----------------------------------------------
Xray | 只显示对象的轮廓
-----------------------------------------------
----------------括号里面的是参数。-------------
细致的解释看下面：
1、Alpha 滤镜
"Alpha"属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定各种不同范围的透明度。
Alpha 滤镜语法
{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,
style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}
参数含义分别如下：
参数 说明
opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style 指定透明区域的形状特征：
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。
2、Blur 滤镜
用手指在一幅尚未干透的画面迅速划过时，画面就会变得模糊。”Blur"就是产生同样的模糊效果。
Blur滤镜语法 HTML：{filter:blur(add=add,direction=direction,
strength=strength)}
Script语言： [oblurfilter=] object.filters.blur
参数含义分别如下：
参数 说明
add 它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的，
这是一个布尔值:ture （默认）或false
direction 该参数用来设置模糊的方向。
0度代表垂直向上，每45度为一个单位，默认值是向左的270度
strength 只能使用整数来指定，代表有多少像素的宽度将受到模糊影响，默认是5个像素。
3、DropShadow 滤镜
“DropShaow"，顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上色彩。
DropShadow 滤镜语法 {filter:dropshadow
(color=color,offx=ofx,offy=offy,positive=positive)}
参数含义如下：
参数 说明
Color 代表投射阴影的颜色
offx X方向阴影的偏移量
offy Y方向阴影的偏移量
Positive 布尔值
如果为TRUE（非0），就为任何的非透明像素建立可见的投影
如果为FASLE（0），就为透明的像素部分建立透明效果
4、FlipH, FlipV 滤镜
FlipH 滤镜实现水平反转
FlipH 滤镜语法 {filter:filph}
FlipV 滤镜实现垂直反转
FlipV 滤镜语法 {filter:filpv}
5、Glow 滤镜
对一个对象使用"glow"属性后，这个对象的边缘就会产生类似发光的效果。
Glow 滤镜语法 {filter:glow(color=color,strength)}
参数含义如下：
参数 说明
Color 指定发光的颜色
STRENGTH 强度，值为1到255之间的任何整数，指定发光色力度和范围。
6、Gray 滤镜
使用Gray滤镜可以把一张图片变成灰度图，语法很简单：
Gray 滤镜语法 {filter:gray}
7、Invert滤镜
使用Invert滤镜可以把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值
Invert 滤镜语法 {filter:invert}
8、Xray滤镜
使用Xray滤镜可以让对象反映出它的轮廓并把这些轮廓加亮，类似于所谓的“X”光片。
Xray 滤镜语法 {filter:xray}
9、Mask 滤镜
Mask 滤镜语法 {filter:mask(color=color)}
使用"MASK"属性可以为对象建立一个覆盖于表面的膜，其效果就象戴着有色眼镜看物体一样 。
10、Light 滤镜
Light 滤镜语法 {filter:light}
这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性，那么就可以调用它的“方法(Method)"来设置或者改变属性。“LIGHT"可用的方法有：
参数 说明
AddAmbient 加入包围的光源
AddCone 加入锥形光源
AddPoint 加入点光源
Changcolor 改变光的颜色
Changstrength 改变光源的强度
Clear 清除所有的光源
MoveLight 移动光源
我们可以定义光源的虚拟位置，以及通过调整X轴和Y轴的数值来控制光源焦点的位置，还可以调整光源的形式（点光源或者锥形光源）指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源，可能会产生一些意想不到的效果。
11、Shadow 滤镜
Shadow 滤镜
语法 {filter:shadow(color=color,direction=direction)}
利用“Shadow”属性可以在指定的方向建立物体的投影，COLOR是投影色，DIRECTION是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。
12、Wave 滤镜
Wave 滤镜
语法 {filter:wave(add=add,freq=freq,
lightstrength=strength,
phase=phase,strength=strength)}
参数 说明
wave 把对象按垂直的波形样式打乱。
默认是 TRUE（非0）
ADD 是否要把对象按照波形样式打乱
FREQ 波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹
LIGHTSTRENGTH 可以对于波纹增强光影的效果，范围0----100
PHASE 设置正弦波的偏移量
STRENGTH 振幅大小
--------------------------------------------------------------
内容很多，慢慢看。还有这个问题发到电脑那块的话肯定有很多人回答的。
资料来天极网~
Ⅱ Dreamweaver cs6中CSS样式里的过滤器没有效果怎么回事儿
你这个只有ie8以下才有效果吧，这个filter是滤镜 只有ie能识别
Ⅲ css的filter:gray没效果
主要发挥作用的样式
过滤器以下两行：灰色;
-webkit的过滤器：灰度（100％）;
过滤器的意思过滤器，滤芯：灰色的意思是说一个灰色的滤光页，里面的所有内容的HTML变成黑色和白色。然而，这种过滤器是无效的Chrome和Safari浏览器，所以下面会有一排
-webkit的过滤器：灰度（100％）;
这种风格是专为使用webkit核心的浏览器，意义和过滤：灰色差不多，只是以不同的方式写什么。
。幻灯片口罩{
过滤：无;
不透明度：无;
}
几行和页黑白无所谓，它的作用应该是关注的焦点网站过滤器除去。
Ⅳ html div css为什么我浏览器显示的图片没有变成灰色
1、CSS Filter
使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。
现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox、Chrome和Safari。以前,我们也提到Webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果。
添加如下CSS样式可以将图像变成灰色
代码如下:
img {
-webkit-filter: grayscale(1);/* Webkit */
filter:gray;/* IE6-9 */
filter: grayscale(1);/* W3C */
}
支持IE6-9和Webkit浏览器(Chrome 18+, Safari 6.0+, and Opera 15+)
(注意:这段代码在Firefox上无效果。)
2、Javascript
第二种方法是通过使用JavaScript技术上应该支持所有JavaScript的浏览器,包括IE6以下
代码来自Ajax Blender.
代码如下:
varimgObj = document.getElementById('js-image');
functiongray(imgObj) {
varcanvas = document.createElement('canvas');
varcanvasContext = canvas.getContext('2d');
varimgW = imgObj.width;
varimgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(vary = 0; y < imgPixels.height; y++){
for(varx = 0; x < imgPixels.width; x++){
vari = (y * 4) * imgPixels.width + x * 4;
varavg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
returncanvas.toDataURL();
}
imgObj.src = gray(imgObj);
3、SVG
第三种方法来自SVG Filter.，你需要创建一个SVG文件,并将以下代码写在里面，保存命名为***.svg
代码如下:
<svgxm .w3.org/2000/svg">
<filterid="grayscale">
<feColorMatrixtype="matrix"values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
然后利用过滤器的属性，我们可以通过SVG文件中的元素的ID连接SVG文件
[code]
img {
filter:url('img/gray.svg#grayscale');
}
Ⅳ CSS3哪些新特性值得称赞
简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。
1、CSS进行渐变背影的设置，在background中添加了linear-gradient线性渐变，
background: linear-gradient(yellow 0%, #000 80%); /*从0%黄色到80%黑色的渐变*/
2、CSS 3D
perspective:查看视图的位置，如拍照时的镜头位置一样。
transform-style中preserve-3d，设置了此属性时，将子元素包裹在一个3D视图里。
3、CSS animation
说到动画就不得不说jQuery的animation。但有了CSS3后就再也不用JS进行制作动画了。
keyframes定义帧动画，可根据百分比进行设置，也可利用from和to的方式进行设置。
利用animation引用定义好的keyframes帧动画。animation:rotate 20s infinite linear; /*设置引用的动画，动画时间，动画的timing-function,动画方式*/
4、CSS filter
fileter并非IE的过滤器，是CSS3中新添加的属性。
包含效果有：grayscale灰度，sepia褐色，saturate饱和度,hue-rotate色相旋转,invert反色,opacity透明度,brightness亮度,contrast对比度,blur模糊,drop-shadow阴影.
挤压效果就是利用filter中的blur加saturate混合而来
Ⅵ html/css编程如何处理浏览器兼容问题
这个需要一点经验，大致是：首先尽量写浏览器都兼容的样式，用都兼容的标签，比如table比div兼容性好，比较好控制；
其次就是用css hack了，比如：*height:50px，这个*只对IE有效；_height:50px则只对IE7和IE6有效；其它hack可以随时查阅网络，很容易找到
Ⅶ css修改png图片颜色
CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 MDN
CSS标准里包含了一些已实现预定义效果的函数。
filter: none
| blur()
| brightness()
| contrast()
| drop-shadow()
| grayscale()
| hue-rotate()
| invert()
| opacity()
| saturate()
| sepia()
| url();
具体请看原文
————————————————
版权声明：本文为CSDN博主「nanhupatar」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/nanhupatar/article/details/82793637
Ⅷ css过滤器问题 急 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
你是利用滤镜让IE6支持PNG透明吧，呵呵，这个bug解决办法很简单：给a加上position:relative;不过这里版要提醒你，你权这里的image路径是相对路径，那么值得注意的是，这个相对路径是根据html相对的，而不是CSS，所以当你发布的时候会发现一堆问题，所以，这里建议还是放到外网，使用绝对路径。哦，我看错了，你是指背景拉伸么，那么你这样写有考虑到兼容问题么？
Ⅸ css的hack
对IE6、IE7、FF兼容性的详细CSS HACK介绍2007年12月05日 16:00以下为引用：
现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对! important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏 览一下，应该没有问题了。
现在写一个CSS可以这样：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们都互不干扰。我真希望那个IE6快点退休......
css Hacks，css样式表补丁.用于修正XHTML编码设计的网页模板布局,某些层的溢出问题,HACKS出处:www.webdevout.net，这个CSS补丁(hacks)很简单，在样式表中单独为ie7设置某个元素，id或者class前面这样写:
*:first-child+html #ID{}
或者
*:first-child+html .class{}
别忘掉了前面的*,这个hacks使得DIV+CSS网页模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的浏览器中都可以完美体现原始布局,而不会出现层溢出等问题.
IE7 修复了很多 bug，也增加了对一些选择符的支持，所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用，条件注释才是万无一失的过滤器，但是条件注释只能出现在 HTML 中，CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack，具体就是：
>body
html*
*+html
这 三种写法，其中前两种都是不合法的 CSS 写法，在标准兼容浏览器中被被忽略，但是 IE7 却不这么认为。对于 >body ，它会将缺失的选择符用全局选择符 * 代替，也就是将其处理成了 *>body，而且不光对于 > 选择符，+,~ 选择符中这个现象也存在。对于 html* ，由于 html 和 * 之间没有空格，所以也是一种 CSS 语法错误，但 IE7 不会忽略，而是错误地认为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是合法的 CSS 写法，也就是说可以通过校验器的验证，因此也是作者推荐的 hack 用法。
最后作者给出了最佳方式：
IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.
The IE7 CSS Hack(!important在ie7.0的hack方法)
由 于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以 问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓"上有政策,下有对策",国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下为作者从国外网站的翻译.
新建一个css样式如下：
插入代码：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个div,并使用前面定义的css的样式：
插入代码：
some text here
在body表现这里加入lang属性,中文为zh：
插入代码：
现在对div元素再定义一个样式：
插入代码：
[/code]
*:lang(en) #item{
background:green !important;
}
[/code]
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：
插入代码：
#item:empty {
background: green !important
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上,并在以下浏览器和操作系统下通过测试：
ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win & linux
netscape 7.01, 8/win
mozilla 1.7.12/win & linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux
Screenshot of the IE7 css hack in IE7
Screenshot of the IE7 css hack in Firefox 1.5
按照远作者的说法其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用.
文章来自：http://www.aixq.com/read.php?704
firefox,ie7,ie6兼容性问题，和css解决方案
注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;
写两句代码来控制一个属性，区别Firefox与IE6：
background:orange;*background:blue;
//这一句代码写出来时，你用firefox或其它非IE浏览时，会发现，写了该代码的区域背景是橙色的，如果用IE浏览，却是蓝色的，这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；
写两句代码来控制一个属性，区别IE7与IE6：
background:green !important;background:blue;
//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别! important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份。
写两句代码来控制一个属性，区别Firefox与IE：
background:orange; *background:green;
//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*
写三句代码来控制一个属性，区别Firefox，IE7，IE6：
background:orange;*background:green !important;*background:blue;
//这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直 接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识 别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。
<style>body{color:00ff00;}</style>
<!--[if IE 6]>
<style>body{color:#ff6600;}</style>
<![endif]-->
<!--[if IE 7]>
<style>body{color:#ff0000;}</style>
<![endif]-->
Ⅹ css怎样取消filter 过滤器 渐变
css怎样取消filter 过滤器 渐变
两种方法： 1、将你所有的JSP页面单独放在一个文件夹里(假如jspPage)，jspPage文件夹里可根据类别分若干子文件夹，再把相对应的JSP放在子文件夹里； JS、CSS及图片等分别放在外面的文件夹里(与文件夹jspPage并列) 再：/jspPage/*...