分享
 
 
 

Invert属性、Glow属性和FlipH、FlipV属性

王朝other·作者佚名  2008-05-20
窄屏简体版  字體: |||超大  

Invert属性

Invert属性可以把对象的可视化属性全部翻转,包括色彩、饱和度和亮度值。

它的表达式也很简单:

Filter:Invert

我们再来看一下加上Invert属性前后的图片效果变化(如下图):

原图

Invert属性效果图

我们看到Invert属性实际上达到的是一种“底片”的效果。

自己拿别的图来试试吧。

Glow属性

当对一个对象使用“Glow”属性后,这个对象的边缘就会产生类似发光的效果。它的表达式如下:

Filter:Glow(Color=color,Strength=strength)

Glow属性的参数只有两个:Color是指定发光的颜色,Strength指定发光的强度,参数值从1到255。 让我们先来看一下加上Glow属性的效果图:

怎么样,是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下:

<html>

<head>

<title>filter glow</title>

<style>//*开始设置CSS样式*//

<!--

.leaf{position:absolute; top:20; width:400;

filter:glow(color=#FF3399,strength=15);}

file://*设置类leaf,绝对定位,Glow滤镜属性,发光颜色值为#FF3399,强度为

15*//

.weny{position:absolute; top:70; left:50; width:300;

filter:glow(color=#9966CC,strength=10);}

file://*设置类weny,绝对定位,glow滤镜属性,发光颜色值为#9966CC,强度为

15*//

-->

</style>

</head>

<body>

<div class=“leaf”>//*leaf类样式*//

<p style=“font-family:lucida handwriting;

font-size:54pt;font-weight:bold;color:#003366;”>

Leaf Mylove</p>//*设置字体名称、大小、粗细、颜色*//

</div>

<div class=“weny”>//*weny类样式*//

<p style=“font-family:bailey; font-size:48pt;

font-weight:bold;color:#99CC66;”>

file://设置字体名称、大小、粗细、颜色*//

Weny Good!</p>

</div>

</body>

</html>

您还可以随意修改颜色值,看看其他的发光效果是怎样的。

FlipH、FlipV属性

Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转。它们的表达式很简单,分别是:

Filter:FlipH

Filter:FlipV

我们先来看一幅图:

下面我们分别对它实现水平翻转和垂直翻转,并且在图片上方的一段文字,也发生翻转。代码如下:

<html>

<head>

<title>flip css</title>

<style>//*设置CSS样式开始*//

<!--

div{position:absolute;top:20;width:300;

filter:fliph(flipv);}

file://*定义DIV范围内的样式,绝对定位,翻转为水平翻转或垂直翻转。

注意:在这里fliph和flipv只取其中的一个*//

img{position:absolute;top:70;left:40;

filter:fliph(flipv);}

file://*定义图片的样式,绝对定位,翻转属性和DIV一样。*//

-->

</style>

</head>

<body>

<div>

<p style=“font-family:bailey;font-size:36pt;

font-weight:bold; color:rgb(10,128,156);”>

Leaf Village </p>

file://*定义字体名称、大小、粗细、颜色*//

</div>

<p><img src=“ss05058.jpg”></p>

file://*导入一张图片*//

</body>

</html>

代码产生的两个效果分别如下图:

水平翻转

垂直翻转

翻转的属性应用是不是很简单。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有