2025年精通CSS滤镜(filter)(实例解析)

精通CSS滤镜(filter)(实例解析)好久没弄弄美工了 前端时间由于学校的一个小网站的老师需要网站整体为绿色风格 但是他们又不能提供相关素材 这个 项目就一直拖着 需求也定不下来 后台基本功能都已经哦了 就等页面了 本来是想好好学学别的东西 巩固下 Java 一些基础 但是这事拖着 还是够不爽的

大家好,我是讯享网,很高兴认识大家。

  好久没弄弄美工了,前端时间由于学校的一个小网站的老师需要网站整体为绿色风格,但是他们又不能提供相关素材,这个

项目就一直拖着,需求也定不下来。后台基本功能都已经哦了,就等页面了,本来是想好好学学别的东西,巩固下Java一些基础,

但是这事拖着,还是够不爽的。security框架的例子也不好弄,于是还是决定总结一下最近学习的CSS滤镜。Css滤镜比较帅,可以

取代一部分PS才能实现的效果,但是缺点也比较明显,浏览器并不是都支持。但考虑到IE6,7...占的市场份额还是挺很大的,所以有

学习的必要。网上不缺CSS滤镜的知识,但是大多是长篇大论,或不够全面。现在结合自己做的例子和网上的资料,自己的学习心得

总结如下。毕竟我不是专业搞美工,所以这篇随笔,是基本是面向初学者,并使其快速掌握。也了解现在的CSS都能做什么。

为了充实内容,顺便给出jQuery实现弹出层特效的源码。

  CSS(Cascading Style Sheets) 层叠样式表单。1998年5月12日,Cascading Style Sheets,level 2 成为了W3C 

的新标准。同时,”W3C CoreStyles '和CSS2 Validation Service' 以及“CSS Test Suite' 宣布成立。它是一组样式,样式

中的属性在HTML元素中依次出现,并显示在浏览器中。样式可以定义在HTML文档的标志(TAG)里,也可以在外部附加文档

        对于滤镜和渐变效果,前者是基础,因为后者就是滤镜效果的不断变化和演示更替。当滤镜和渐变效果结合到一个基本

的SCRIPT小程序中后,网页设计者就可以拥有一个建立动态交互文档的强大工具。也就是CSS FILTER+ SCRIPT, 这就说


讯享网


  可视化滤镜属性只能用在HTML控件元素上,不能使用div的id,class定义。所谓的HTML空间元素就是它们在页面上定


元素                                       说明 

BODY                      网页文档的主体元素,所有的可见范围都在元素内 
BUTTON                  表单域的按钮,可以有“发送(submit)”、“重置(reset)”等形式 
DIV                         定义了网页上的一个区域,这个区域的高度、宽度或者绝对位置都是以知的 
IMG                         图片元素,通过指定“src'属性来指定图片的来源 
INPUT                      输入表单域 
MARQUEE                移动字幕效果 
SPAN                      定义了网页上的一个区域,这个区域的高度、宽度或者绝对位置都是以知的 
TABLE                    表格 
TD                         表格数据单元格 
TEXTAREA              文本区域 
TFOOT                   多行输入文本框 
TH                         表格标题单元格 
THEAD                   表格标题 
TR                         表格行 



滤镜效果 描述 :

Alpha 设置透明度 
Blru 建立模糊效果 
Chroma 把指定的颜色设置为透明 
DropShadow 建立一种偏移的影象轮廓,即投射阴影 
FlipH 水**转 
FlipV 垂直反转 
Glow 为对象的外边界增加光效 
Grayscale 降低图片的彩色度 
Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 
Light 在一个对象上进行灯光投影 
Mask 为一个对象建立透明膜 
Shadow 建立一个对象的固体轮廓,即阴影效果 
Wave 在X轴和Y轴方向利用正弦波纹打乱图片 
Xray 只显示对象的轮廓 

 

1、Alpha 滤镜 
语法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx, 
starty=starty,finishx=finishx,finishy=finishy)} 

'Alpha'属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说

 

“opacity'代表透明度水准。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,

100代表完全不透明。”finishopacity'是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定

、3代表长方形。”STARTX“和”STARTY“代表渐变透明效果的开始X和Y坐标。”


复制代码

小讯
上一篇 2025-03-07 08:14
下一篇 2025-03-03 11:07

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/19105.html