首页 > 代码库 > CSS 滤镜（IE浏览器专属其他浏览器不支持）

CSS 滤镜（IE浏览器专属其他浏览器不支持）

2024-07-12 13:28:20   230人阅读

Filter 属性介绍：

设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute，或者设定 display 属性为 block。请参阅对象的 hasLayout 属性。若要在img 对象上应用 shadow 滤镜，可以在该对象 img 对象的父容器上应用。滤镜的机制是可扩展的。通过利用 Microsoft? DirectX? Media SDK，你可以使用 C++开发和使用第三方滤镜。该属性在 MAC 平台上不可用。对应的脚本特性为 filter。


Alpha 滤镜的使用：

属性                       值                                             说明
opacity                   0-100(100是原来的亮度)               对象的亮度
style                      1,2,3（取值就这三个）                   滤镜的样式

两个属性可以一起用，用逗号分隔

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 滤镜</title>
<style type="text/css">
div{
    background-color:#FC3;
    width:200px;
    height:100px;
    filter:Alpha(style=3);
}
img{
    filter:Alpha(style=3);
}
</style>
</head>
<body>
<div>PHP100.COM中文网</div>
<img src="../../../素材库/m_1266887233273.jpg"/>
</body>
</html>

 

Blur 滤镜的使用
属性                                    值                                             说明
add                                     true/false                                  是否印象派
direction                              0-360                                       角度
strength                             数字                                           模糊度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 滤镜</title>
<style type="text/css">
div{
    background-color:#FC3;
    width:200px;
    height:100px;
    filter:Alpha(style=3);
}
img{
    filter:blur(add=true,strength=30);
}
</style>
</head>
<body>
<div>PHP100.COM中文网</div>
<img src="../../../素材库/m_1266887233273.jpg"/>
</body>
</html>

 

 

 

Fliph、Flipv滤镜：没有属性

Filph：垂直翻转            Flipv：水平翻转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 滤镜</title>
<style type="text/css">
div{
    background-color:#FC3;
    width:200px;
    height:100px;
    filter:Fliph();
}
img{
    filter:Flipv()Fliph();
}
</style>
</head>
<body>
<div>PHP100.COM中文网</div>
<img src="../../../素材库/m_1266887233273.jpg"/>
</body>
</html>

 

 

 

DropShadow 滤镜（投影）
属性                                           值                                                   说明
color                                          颜色                                                 阴影颜色
offx                                           数字                                                 x 坐标偏移
offy                                           数字                                                 y 坐标偏移
positive                                     true/false                                          是否建立透明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 滤镜</title>
<style type="text/css">
div{
    width:200px;
    height:100px;
    filter:DropShadow(color=#0F0,offx=30,offy=40);
}
img{
    
}
</style>
</head>
<body>
<div>PHP100.COM中文网</div>
<img src="../../../素材库/m_1266887233273.jpg"/>
</body>
</html>

 

 

 

Glow 滤镜
属性                                   值                                               说明
color                                 颜色                                             发光颜色
strength                           数字                                             发光厚度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 滤镜</title>
<style type="text/css">
div{
    padding:30px;
    width:200px;
    height:100px;
    filter:glow(color=#0F0,strength=50);
}
img{
    
}
</style>
</head>
<body>
<div>PHP100.COM中文网</div>
<img src="../../../素材库/m_1266887233273.jpg"/>
</body>
</html>

 

 

 

Gray ,Invert,Xray 滤镜：无属性
Gray ：黑白照      Invert：照片反光      Xray： x—射线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 滤镜</title>
<style type="text/css">
div{
    background-color:#CF0;
    padding:30px;
    width:200px;
    height:100px;
    
}
img{
    filter:invert();
}
</style>
</head>
<body>
<div>PHP100.COM中文网</div>
<img src="../../../素材库/m_1266887233273.jpg"/>
</body>
</html>

 

 

 Shadow 滤镜（阴影）
属性                                       值                                                            说明
color                                      颜色                                                          阴影颜色
direction                                 0-360                                                       阴影方向

strength                           数字                                                                厚度

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>CSS 滤镜</title>
 6 <style type="text/css">
 7 div{
 8     filter:shadow(color=red,direction=135);
 9     padding:30px;
10     width:200px;
11     height:100px;
12     
13 }
14 img{
15     
16 }
17 </style>
18 </head>
19 <body>
20 <div>PHP100.COM中文网</div>
21 <img src="../../../素材库/m_1266887233273.jpg"/>
22 </body>
23 </html>

 

 

 

 


联系
我们