泉州浮桥网页设计培训-DHTML CSS Filters

Filters

filter 属性允许您向文本和图像添加更多的样式效果。

h1
{
width:100%;
filter:glow;
}

注释:若需要使用 filter 属性,请始终指定元素的宽度。

上面的例子产生下面的输出:

Header

不同的滤镜

注释:除非 background-color 属性被设置为 transparent,否则某些 Filter 属性将无法工作!

属性 参数 描述 例子
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
允许您设置元素的透明度
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
使元素模糊
filter:blur(
add=true,
direction=90,
strength=6);
chroma color 使指定的颜色透明
filter:chroma(
color=#ff0000)
fliph none 水平反转元素 filter:fliph;
flipv none 垂直反转元素 filter:flipv;
glow
  • color
  • strength
使元素发光
filter:glow(
color=#ff0000,
strength=5);
gray none 用黑白色来呈现元素 filter:gray;
invert none 用反转的颜色和亮度值来呈现元素 filter:invert;
mask color 呈现带有指定背景色和透明前景色的元素
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
呈现带有阴影的元素
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
呈现带有阴影的元素
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
把元素呈现为波浪状
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none 使用黑白色显示带有反转色和亮度值的元素 filter:xray;

Background

background 属性允许您选用自己的背景。

background-attachment:scroll

背景随页面滚动。

background-attachment:fixed

背景不会随页面滚动。

更多实例

Visibility
如何使某个元素不可见。你希望此元素显示还是不显示?
Z-index
Z-index 可用于把一个元素放置于另一个元素之后,通过使用 Z-index 次序。
Z-index
请看一下,元素的 Z-index 次序已经改变了。
Cursors
通过 CSS 来改变鼠标指针的样式。
Filters
使用 filter 属性来改变标题的样式。
Filters on Images
filter 属性也可以应用于图像,这里有一些已应用了 filter 属性的图像例子。
Watermark
当页面滚动时不会移动的背景图片。

发表评论

电子邮件地址不会被公开。 必填项已用*标注