css滤镜属性(css滤镜的用法)
css 样式中滤镜属性没提示怎么回事
滤镜 不是css的标准 是早起微软推的 所以只在微软的ie里可以看到效果 ,其它的浏览器完全不支持的
应为非标 自然 开发工具的代码提示里不会有的
旁门左道的东西了 知道有就可以了 不要花心思学了
火狐下css滤镜效果怎么实现
滤镜效果filter的css样式属性是微软Internet Explorer特有的,未被W3C收入,故而在火狐浏览器下尚未提供支持。但是通过js编码可以部分实现一些滤镜效果,如透明等。
随着浏览器的发展CSS的功能越来越强大,大多数的滤镜效果有类似功能的CSS样式实现了。
对应表:
IE 滤镜 W3C 滤镜
Alpha:设置透明层次. grayscale 灰度
blur:创建高速度移动效果,即模糊效果. sepia 褐色
Chroma:制作专用颜色透明. saturate 饱和度
DropShadow:创建对象的固定影子. hue-rotate 色相旋转
FlipH:创建水平镜像图片. invert 反色
FlipV:创建垂直镜像图片. opacity 透明度
glow:加光辉在附近对象的边外. brightness 亮度
gray:把图片灰度化. contrast 对比度
invert:反色. blur 模糊
light:创建光源在对象上. drop-shadow 阴影
mask:创建透明掩膜在对象上.
shadow:创建偏移固定影子.
wave:波纹效果.
Xray:使对象变的像被x光照射一样.
css滤镜属性有哪些?实现什么效果
CSS的滤镜属性较多,但大多效果只能在IE下实现,所以不用做太深入的了解。
这个是《CSS滤镜属性详解》,对你可能有帮助:
如何使用CSS创建滤镜效果?
标签 Filter
Alpha通道属性: Filter :ahpha(opacity=80) 80变量取值范围[1----100]
Blur模糊 4是一个变量
属性:Filter :progid:dximagetransform.microsoft.biur(pixelradius=4,makeshadow=falsh)
Chroma透明色属性:filter:chroma(color=ff6800) ff6800是指去掉ff6800这个颜色
Flip翻转属性:fliter:flipv fliph flipv水平方向 fliph 垂直方向
Mask遮罩属性:filter:mask(color=#8888ff) #8888ff是指使用#8888ff遮罩原始图片
Wave波浪 属性:filter:wave(add=1,freq=4,lightstrength=60,phase=0, strength=6) 这是我在学习CSS的时候自己记的笔记
关于CSS滤镜属性一点问题
代码开头写上文档头声明:!DOCTYPE html,很多怪异的问题都和不写文档头有关;
filter是IE滤镜,只有在IE浏览器中才有效果,IE8以上以及其他现代浏览器请使用 opacity,例如:
opacity: 0.3; ?/* 不透明度:30% */
现在很多浏览器都不支持css的滤镜属性了么?
主流浏览器都支持,只不过表现的方法不一样了,另外也看你的站点有没有必要用滤镜了,如果是面向手机用户的网站,那就没有必要使用什么滤镜了,如果面向电脑用户的网站,只需要设置一些主流浏览器支持的滤镜就好了,比如一个透明的效果。
IE:filter:alpha(opacity=60)
FireFox:-moz-opacity: 0.6
Chrome:opacity: 0.6
所以这个CSS样式的兼容代码就这样写:
.test{
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
这样即能在IE中看到,也能在chrome和firefox中看到,至于其他浏览器就可以忽略不计了,用户不多,还有像360、TT、遨游之类的,他们都是基于IE内核的浏览器,只要IE里显示这些浏览器里也都能显示。