css中用wave滤镜,CSS滤镜
本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧!
滤镜主要是用来实现图像的各种特殊效果。它在Photoshop中具有非常神奇的作用。所以有的Photoshop都按分类放置在菜单中,使用时只需要从该菜单中执行这命令即可。滤镜的操作是非常简单的,但是真正用起来却很难恰到好处。滤镜通常需要同通道、图层等联合使用,才能取得最佳艺术效果。如果想在最适当的时候应用滤镜到最适当是位置,除了平常的美术功底之外,还需要用户的滤镜的熟悉和操控能力,甚至需要具有很丰富的想象力。这样,才能有的放矢的应用滤镜,发挥出艺术才华。
中文名
CSS滤镜
外文名
css filter标识符
filter
所 属
Photoshop
作 用
用来实现图像的各种特殊效果
CSS滤镜标识符
编辑
语音
css滤镜的标识符是“filter”,总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。css滤镜分类
CSS滤镜可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言,能产生更多变幻效果的则称为高级滤镜。
CSS滤镜通道
编辑
语音
alpha滤镜用于设定透明度,它的表达式如下:
filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY)
其中opacity表示透明度等级,可选值从0~100,0代表完全透明,100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形。StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。
ie下实现方式filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 标准浏览器(FF、Chrome、Opera)下实现方式:opacity: 0.5;
CSS滤镜模糊滤镜
编辑
语音
模糊滤镜给予对象朦胧神秘的效果,它的表达式如下:
filter:progid:DXImagetransform.microsoft.blur(makeshadow=makeshadow,pixelradius=pixelradius,
shadowopacity=shadowopacity);
其中makeshadow代表是否处理为阴影,pixelradius表示模糊作用深度,shadowopacity表示阴影的透明度。
CSS滤镜透明色
编辑
语音
chroma滤镜给予图像一个特定的颜色透明,它的表达式如下:"filter:Chroma(Color=color)"
说明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")
CSS滤镜投射阴影
编辑
语音
语法:STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
说明:Color:#rrggbb格式,任意。
Offx:X轴偏离值,设置值为整数,单位为像素;若水平往右移,则为正数;若水平往左移,则为负数。
Offy:Y轴偏离值,设置值为整数,单位为像素;若垂直往下移,则为正数;若垂直往上移,则为负数。
Positive:1或0。
例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
CSS滤镜水平翻转
编辑
语音
语法:STYLE="filter:FlipH"
例子:filter:FlipH
CSS滤镜垂直翻转
编辑
语音
语法:STYLE="filter:FlipV;"
例子:filter:FlipV;
CSS滤镜外边界
编辑
语音
CSS滤镜光效
语法:STYLE="filter:Glow(Color=color,Strength=strength)"
说明:
Color:发光颜色。
Strength:强度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")滤镜:gray
语法:STYLE="filter:Gray"
例子:filter:Gray
CSS滤镜底片效果
编辑
语音
语法:STYLE="filter:Invert"
例子:filter:Invert
CSS滤镜透明膜
编辑
语音
CSS滤镜效果
语法:STYLE="filter:Mask(Color=color)"
例子:filter:Mask(Color="#FFFFE0")
CSS滤镜阴影效果
编辑
语音
图1 shadow阴影效果的direction属性方位图语法:filter:Shadow(Color=color,Direction=direction)
说明:
Color:#rrggbb格式。
Direction:用于设定动态模糊效果的方向,总单位为360°,0代表垂直向上,并以每45°为一个单位,而度数以方向定位时,将如右图1所示:
例子:filter:Shadow(Color="#6699CC",Direction="135")
CSS滤镜wave
编辑
语音
正弦波纹打乱图片效果
语法:filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
说明:
Add:一般为1,或0。
Freq:变形值。
LightStrength:变形百分比。
Phase:角度变形百分比。
Strength:变形强度。
例子:filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")
CSS滤镜显示轮廓
编辑
语音
语法:STYLE="filter:Xray"
例子:filter:Xray
css中用wave滤镜,CSS滤镜相关推荐
- html图片加波浪滤镜,CSS滤镜wave属性(波形滤镜)
[实例介绍] CSS滤镜wave属性(波形滤镜) wave滤镜用来把对象按照垂直的波纹样式打乱.waVe的表达式还是比较复杂的,它一共有5个参数. [基本语法] filter:wave(add=参数值 ...
- css给网页添加 黑白滤镜
<style type="text/css"> /*给网页添加 黑白滤镜*/ html{ /*兼容FF*/ filter ...
- MVC中用 BundleCollection 压缩CSS时图片路径问题
MVC中有个专门提供JS和CSS压缩的类,BundleCollection,其实这个类也可以在asp.net中用, 关于BundleCollection类的详细推荐个地址:http://www.cnb ...
- html5背景图片能加链接,CSS中用背景图片做为超链接的方法
Web2.0时代,在网页设计中用背景图片做为超链接已成为主流,通过CSS的控制,使鼠标移到图片上能有很好的变换效果,虽然用普通的插入图片的方法也能实现效果,但用CSS更为方便,再配合css sprit ...
- css用什么空格,CSS中用什么进行空格的处理(实例)
本篇文章给大家带来的内容是关于CSS中用什么进行空格的处理(实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.空格规则 HTML 代码的空格通常会被浏览器忽略. ◡◡hell ...
- CSS学习笔记(一) CSS基础+CSS3新特性
思维导图 文章目录 思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
- CSS奇思妙想—这里是CSS创造的世界!
CSS奇思妙想 -- 使用 CSS 创造艺术 本文属于 CSS 绘图技巧其中一篇.之前有过一篇:在 CSS 中使用三角函数绘制曲线图形及展示动画 想写一篇关于 CSS 创造艺术的文章已久,本文主要介绍 ...
- css div快捷键,div+css基础
Div+css技术 Div是用于存放文字,图片,元素的容器 Css 是用于指定存放在div中的内容如何显示,包括内容的位置和外观(层叠样式表) Html 文件 1 3 4 5 1 3 4 5 1 3 ...
- 转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
最新文章
- 《ASP.NET MVC 4 实战》----导读
- mysql修改表结构(拆分)
- Linux服务器rsync自动备份
- ASP.NET图片上传(配合jquery.from.js 插件)
- 在NS-3中安装可视化工具pyviz的一些问题的解决
- 521分云南考生被北大录取!仅超一本线1分
- mysql 1033 frm_MySQL ERROR 1033 (HY000): Incorrect information in file. 处理一例
- javascript简易缓动插件
- F: 绝对值 山东科技大学OJ C语言
- 麻省理工学院推出数据美国大数据可视化工具
- ENVI5.1中Landsat 8数据大气校正
- 手把手教你学单片机,学完马上能自己编写开发程序
- L1-015 跟奥巴马一起画方块 (15分) 美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统。2014年底,为庆祝“计算机科学教育周”正式启动,
- 计算机中所有文字信息都是,计算机文字 计算机文字与信息处理
- GTX1060 Windows7/Windows8/Windows8.1 旧版显卡驱动下载链接
- 先天八卦图的排列顺序,这样来解释您能接受吗?
- 谈谈你对keep-alive的了解
- vue2 - 基于Export2Excel.js导出Excel案例(js-xlsx插件二次封装使用)
- 奋斗的小孩系列 FPGA学习altera系列: 第十六篇 分频器设计
- Android之在app图标添加角标