深入透析样式表滤镜(上)
发布时间:2011-06-14 09:48:40
样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰。只用html制作的网页,对页面内各部分的修饰能力有限且语句烦锁,样式表正是弥补这一缺陷的有力技术,它语句文法简单,只要在源码中插入style语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能,使网页更加生动活泼,从而获得满意的效果。当然,样式表的强大还依靠的就是它的滤镜功能。因为有了滤镜,大家就可以轻易地创造出“专业”的艺术效果。为了能帮助大家高效使用好样式表滤镜,笔者将对样式表滤镜各方面的内容进行详细介绍。
一、什么是样式表滤镜
说到滤镜,其实它并不是对图像进行了什么处理,而是在浏览器中对使用了该属性的对象进行一定的修饰。样式表滤镜实际上是样式表一个新的扩展部分,使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上,例如图片、文本、以及其他一些对象,为页面添加一些丰富的变化。如果大家有一些脚本语言的基础,能够把滤镜效果与类似javascript的脚本代码做一些结合,就可以拥有一个在样式表滤镜与脚本共同作用下建立的强大的动态交互文档工具。现在能使用的滤镜有13个之多,不过要欣赏到这些滤镜的特效,必须要求用户的浏览器必须在IE4.0/NC6.0之上,因为只有这些版本的浏览器才能支持样式表滤镜效果。
二、常用的样式表滤镜
随着样式表技术的不断成熟,其滤镜功能和种类也在不断增多。如果用户能够熟练地混合使用它们,将可以产生意想不到的效果。在操作上,用户只需要了解具体滤镜的实际效果后,就能根据实际进行微调了。为了使大家能有针对性地使用滤镜,笔者下面就把一些常用滤镜的功能和参数详细介绍如下:
1、α滤镜
作用:该滤镜可以实现各种溶入效果,如果大家将该滤镜与网页脚本语言结合起来,对滤镜的参数进行处理的话,就能很轻易地做出淡入淡出的效果来。
语法:{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、模糊滤镜
作用:该滤镜主要是让图象产生一种模糊效果。
语法:{filter:blur(add=add,direction=direction,strength=strength)}
参数:该滤镜主要包括三个参数,其中add是用来指定图象是否被改变成印象派的模糊效果,模糊效果是按顺时针的方向进行的,它的数值应该是ture或false;direction参数是用来设置模糊的方向的,其中0度代表垂直向上,每45度为一个单位,默认值是向左的270度;strength 参数代表有多少像素的宽度将受到模糊影响,缺省的参数值是5个像素,而且该参数值只能使用整数来指定。
3、斜影滤镜
作用:该滤镜主要是为对象建立轮廓的影子效果的,它可以在指定的方向建立物体的投影;
语法:{filter:shadow(color=color,direction=direction)}
参数:斜影滤镜只有两个参数,其中color代表投影的底色,该数值是用英文字母来代替的,例如投影底色是红色的话,就应该设置color=red;direction参数是用来设置投影方向的,如果该数值是0的话,就代表垂直投影,此外该数值每45度为一个单位,它的默认值是向左的270度。
4、发光滤镜
作用:该滤镜可以给图象或者文字产生一种发光效果;
语法:{filter:glow(color=color,strength=strength)}
参数:该滤镜的color参数与阴影滤镜的color参数功能几乎是一样的,不过这里的color参数是用来设置发光颜色的;strength参数是用来指定发光强度的,其值为1到255之间的任何整数。
5、灯光滤镜
作用:灯光滤镜是模拟光源来投射文字或者图象,使图象和文字能产生一定的投射效果;
语法:{filter:light}
参数:一旦为对象定义了“light"滤镜属性后,大家就可以调用它的“方法(Method)"来设置或者改变属性,该滤镜可用的方法有:AddAmbient方法是用来加入包围光源的,AddCone方法是用来加入锥形光源的,MoveLight方法是用来移动光源的,Changstrength方法是用来改变光源强度的,Changcolor方法是用来改变光的颜色的,Clear方法是用来清除所有光源的。
猜你喜欢
- Django提供了翻页器。用Django的Paginator类实现一、views模块导入Paginator类实现数据分页ApiTest/ap
- 一、k-近邻算法原理及API1.k-近邻算法原理如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则
- 本文实例讲述了php简单实现批量上传图片的方法。分享给大家供大家参考,具体如下:<?phpfunction upload_multi(
- 目录话不多说,直接贴所有代码运行效果需要用到的两张图片总结话不多说,直接贴所有代码import randomimport sysimport
- 函数嵌套和嵌套调用函数的嵌套函数的嵌套:在函数里面还有函数。分为外函数和内函数。嵌套函数是为函数内部服务的,比如减少代码的重复,想要调用函数
- 前言 上一篇文章,我们讲解了图像处理中的阈值函数,这一篇文章我们来做膨胀和腐蚀函数。膨胀与腐蚀 说概念可能很难解释,我们来看图,首先是原图:
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- 如下所示:# -*- coding: utf-8 -*-import sysfrom PySide.QtGui import *from P
- 由于连续的字符(字母、符号、数字)在默认情况下是不换行的,可能会破坏整个界面布局。那如何解决这个问题呢?在 IE 和 Safari 1.3+
- 在写代码过程中,经常遇到一行代码很长的情况。为了让代码显得整齐干净,就需要把一行代码分成多行来写,Python中有两种小技巧可以实现该功能:
- 最近在处理语音检索相关的事。 其中用到语音识别,调用的是讯飞与百度的api,前者使用js是实现,后者用python3实现(因为自己使用pyt
- public partial class CMS_DBDataContext { partial void OnCreated() { //
- 本文实例为大家分享了vue实现触底查询功能的具体代码,供大家参考,具体内容如下1.使用vant-list组件相关内容如下:2.对象绑定值的默
- 本文实例讲述了python访问mysql数据库的实现方法。分享给大家供大家参考,具体如下:首先安装与Python版本匹配的MySQLdb示例
- Anaconda Jupyter安装拓展nbextensions先在终端pip两个包:Pip install jupyter_contrib
- clock()方法返回当前的处理器时间,以秒表示Unix上一个浮点数。精度取决于具有相同名称的C函数,但在任何情况下,这是使用于
- 一 计算公式:二 实现代码(1)import mathfrom tqdm import tqdmimport timetotal,s,n,t
- 镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在):1.通过config命令npm config
- 我们可以利用err对象来判断。当程序没有出现错误就说明已经执行了sql操作: sql="insert into
- 如下所示:from numpy import *import numpy as npimport matplotlib.pyplot as