zoukankan html css js c++ java

CSS:滤镜的使用(图解8)

注意：CSS滤镜只针对于IE浏览器，其他浏览器的浏览效果可能不同。

alpha通道：filter:alpha(opacity=50);

View Code

 1 <html>
 2 <head>
 3 <title>alpha滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     background:url(bg1.jpg);
 8     margin:20px;
 9 }
10 img{
11     border:1px solid #d58000;
12 }
13 .alpha{
14     filter:alpha(opacity=50);
15 }
16 -->
17 </style>
18    </head>
19 <body>
20 <img src="building1.jpg" border="0">&nbsp;&nbsp;
21 <img src="building1.jpg" border="0" class="alpha">
22 </body>
23 </html>

View Code

 1 <html>
 2 <head>
 3 <title>alpha滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     background:url(bg1.jpg);
 8     margin:20px;
 9 }
10 img{
11     border:1px solid #d58000;
12 }
13 .alpha{
14     filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=0,finishy=100);
15     /* 从上到下渐变 */
16 }
17 -->
18 </style>
19    </head>
20 <body>
21 <img src="building2.jpg" border="0">&nbsp;&nbsp;
22 <img src="building2.jpg" border="0" class="alpha">
23 </body>
24 </html>

View Code

 1 <html>
 2 <head>
 3 <title>alpha滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     background:url(bg1.jpg);
 8     margin:10px;
 9 }
10 .alpha1{
11     filter:alpha(opacity=100,finishopacity=0,style=2);
12     /* 圆形渐变，中间不透明，四周透明 */
13 }
14 .alpha2{
15     filter:alpha(opacity=0,finishopacity=80,style=2);
16 }
17 -->
18 </style>
19    </head>
20 <body>
21 <center>
22 <img src="building3.jpg"><br><br>
23 <img src="building3.jpg" class="alpha1">
24 <img src="building3.jpg" class="alpha2">
25 </center>
26 </body>
27 </html>

View Code

 1 <html>
 2 <head>
 3 <title>alpha滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     background:url(bg1.jpg);
 8     margin:10px;
 9 }
10 .alpha1{
11     filter:alpha(opacity=100,finishopacity=0,style=3);
12     /* 矩形渐变，中间不透明，四周透明 */
13 }
14 .alpha2{
15     filter:alpha(opacity=0,finishopacity=100,style=3);
16     /* 反之 */
17 }
18 -->
19 </style>
20    </head>
21 <body>
22 <center>
23 <img src="strawberry.jpg">
24 <img src="strawberry.jpg" class="alpha1">
25 <img src="strawberry.jpg" class="alpha2">
26 </center>
27 </body>
28 </html>

blur模糊：类似于高斯模糊

filter:progid:DXImageTransform.Microsoft.blur(pixelradius=10,makeshadow=false);

View Code

 1 <html>
 2 <head>
 3 <title>Blur滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     margin:10px;
 8 }
 9 .blur{
10     filter:progid:DXImageTransform.Microsoft.blur(pixelradius=10,makeshadow=false);
11 }
12 -->
13 </style>
14    </head>
15 <body>
16 <img src="building9.jpg">&nbsp;
17 <img src="building9.jpg" class="blur">
18 </body> 
19 </html>

MotionBlur滤镜：

filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true);

View Code

 1 <html>
 2 <head>
 3 <title>MotionBlur滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     margin:10px;
 8 }
 9 .motionblur{
10     filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true);        /* 水平向右 */
11 }
12 -->
13 </style>
14    </head>
15 <body>
16 <img src="liuxiang.jpg">&nbsp;&nbsp;
17 <img src="liuxiang.jpg" class="motionblur">
18 </body>
19 </html>

查看全文

相关阅读:
终于搞明白Unicode,ASCII,UTF8,UCS2编码是啥了
 在IDEA中构建Tomcat项目流程
 在执行jar包时如何使用调优参数
 在浏览器运行JS脚本实现博客园文章批量删除
 线索二叉树之初步剖析（献给那些想形象思考二叉树遍历过程的人）
二分查找c++实现
 c++学习之初话函数指针和函数对象的因缘
 继承与动态内存分配
 C++入门之初话多态与虚函数
 c++入门之类继承初步

原文地址：https://www.cnblogs.com/KeenLeung/p/2507064.html