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

2022-10-16 08:30:54

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>

CSS 滤镜（IE浏览器专属其他浏览器不支持）,布布扣,bubuko.com

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

码农公寓

相关文章