静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。

请新建文件TestImage.html

注意：静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
欢迎与邀月交流,net技术与软件架构
内容如下，(可自行修改)：


代码如下:

<!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=gb2312" />
<title>测试图片效果</title>
<style>...
.Filter1
{...}{
filter:Alpha(opacity=50,finishOpacity=80,style=0);
}
.Filter2
{...}{
filter:FlipH;
}
.Filter3
{...}{
filter:FlipV;
}
.Filter4
{...}{
filter:Gray;
}
.Filter5
{...}{
filter:Xray;
}
.Filter6
{...}{
filter:Invert;
}
.Filter7
{...}{
filter:Glow(color=#4A7AC9,strength=50);
}
.Filter8
{...}{
filter:Shadow(color=#000000,direction=135);
}
.Filter9
{...}{
filter:Dropshadow(color=#000000,offX=50,offY=50);
}
.Filter10
{...}{
filter:Blur(direction=135);
}
.Filter11
{...}{
filter:Wave(freq=7,strength=9,lightstrength=5,phase=5);
}

</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>原图<br /></td>
  </tr>
  <tr>
    <td><img  src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="原图" /></td>
  </tr>
  <tr>
    <td><br />
      半透明<br />
opacity:开始处的透明度。<br />

finishOpacity:结束处的透明度。<br />

style:0为平均透明 1为线状透明 2为圆形透明 3为菱形透明<br /></td>
  </tr>
 <tr>
    <td><img class="Filter1" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="" /></td>
  </tr>
  <tr>
    <td><br />
      左右翻转<br />
</td>
  </tr>
  <tr>
    <td><img class="Filter2" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="左右翻转" /></td>
  </tr>
   <tr>
    <td><br />
     上下翻转<br /></td>
  </tr>
  <tr>
    <td><img class="Filter3" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="上下翻转" /></td>
  </tr>
   <tr>
    <td><br />
     灰度<br /></td>
  </tr>
  <tr>
    <td><img class="Filter4" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="灰度" /></td>
  </tr>
   <tr>
    <td><br />
     X光<br /></td>
  </tr>
  <tr>
    <td><img class="Filter5" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="X光" /></td>
  </tr>
   <tr>
    <td><br />
     色彩对换<br /></td>
  </tr>
  <tr>
    <td><img class="Filter6" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="色彩对换" /></td>
  </tr>
   <tr>
    <td><br />
      发光边框<br />
    color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度x2,滤镜高=图高+发光强度x2+10<br /></td>
  </tr>
  <tr>
    <td><img class="Filter7" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="发光边框" /></td>
  </tr>
   <tr>
    <td><br />
      投影边框<br />
color为发光颜色代码,direction表示方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+25,濾鏡高=图高+40<br /></td>
  </tr>
  <tr>
    <td><img class="Filter8" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="投影边框" /></td>
  </tr>
   <tr>
    <td><br />
      阴影边框<br />
color为发光颜色代码,offX表示水平位移offY表示垂直位移(可正可负),滤镜宽=图宽+水平位移绝对值+10,滤镜高=图高+垂直位移绝对值+2)<br /></td>
  </tr>
  <tr>
    <td><img class="Filter9" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="阴影边框" /></td>
  </tr>
   <tr>
    <td><br />
      模糊边框<br />
Direction表示方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+15,濾鏡高=图高+30<br /></td>
  </tr>
  <tr>
    <td><img class="Filter10" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="模糊边框" /></td>
  </tr>
   <tr>
    <td><br />
      波形边框<br />
    Freq表示波形频率(>0)，strength表示振幅强度(>0)，lightstrength表示波峰强度(0~100愈高越黑)，phase表示起始相位(0~100),滤镜宽=图宽+振幅强度x2
滤镜高=图高+振幅强度x2+10<br /></td>
  </tr>
<tr>
    <td><img class="Filter11" src="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt="波形边框" /></td>
  </tr>

</table>

</body>
</html>

效果如下：

赞 (0)

相关推荐

  • 静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。

    静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。

    请新建文件TestImage.html注意:静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器.欢迎与邀月交流,net技术与软件架构内容如下,(可自行修改): 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • SpringMVC返回图片的几种方式(小结)

    后端提供服务,通常返回的json串,但是某些场景下可能需要直接返回二进制流,如一个图片编辑接口,希望直接将图片流返回给前端,此时可以怎么处理? I. 返回二进制图片 主要借助的是 HttpServletResponse这个对象,实现case如下 @RequestMapping(value = {"/img/render"}, method = {RequestMethod.GET, RequestMethod.POST, RequestMethod.OPTIONS}) @CrossOr

  • 详解vue-cil和webpack中本地静态图片的路径问题解决方案

    详解vue-cil和webpack中本地静态图片的路径问题解决方案

    本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案,分享给大家,具体如下: 1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是我们这时候可能会有个需求就是我们要动态绑定一组本地图片 1 将图片当成模块先引进来,再绑定 但是这种做法局限性比较大,模块化差,代码不好看 . 如果我做的是纯静态的网站展示,有许多的本地静态资源需要加载

  • Django 添加静态文件的两种实现方法(必看篇)

    Django添加静态文件有两种方法: 首先setting.py配置文件中添加静态文件的路径: STATICFILES_DIRS = [ os.path.join(BASE_DIR, "statics"),]  statices为你所建立的存放静态文件的文件夹名 然后进行引用. 1.html 文件中通过 /static/资源名的方式,就可以访问到资源 2.①html 文件头部填写  {% load staticfiles %},②路径填写  {% static 'css/xx.css'

  • android绘制圆形图片的两种方式示例

    android绘制圆形图片的两种方式示例

    android绘制圆形图片的两种方式 看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap当做一种颜色 设置给paint ,paint都已经有颜色了 你想让它方了,圆了,扁了 还不是看你心情 canvas调用那个方法咯 实现的大致思路如下: 1. 创建一个类 继承imageView 重写onDraw() 2. 获取到bitmap图片 3. 计算图片的

  • PHP下载远程图片的几种方法总结

    PHP下载远程图片的几种方法总结 本文演示3个从远程URL下载图片,并保存到本地文件中的方法,包括file_get_contents,curl和fopen. 1. 使用file_get_contents function dlfile($file_url, $save_to) { $content = file_get_contents($file_url); file_put_contents($save_to, $content); } 2.使用CURL function dlfile($f

  • Android图片压缩几种方式总结

    Android图片压缩几种方式总结 图片压缩在Android开发中很常见也很重要,防止图片的OOM也是压缩的重要原因. 首先看下Bitmap图片文件的大小的决定因素: Bitmap所占用的内存 = 图片长度 x 图片宽度 x 一个像素点占用的字节数.3个参数,任意减少一个的值,就达到了压缩的效果. 接下来看下Bitmap图片的几种格式的特点: ALPHA_8  表示8位Alpha位图,即A=8,一个像素点占用1个字节,它没有颜色,只有透明度  ARGB_4444 表示16位ARGB位图,即A=4

  • python抓取网页中链接的静态图片

    本文实例为大家分享了python抓取网页中链接的静态图片的具体代码,供大家参考,具体内容如下 # -*- coding:utf-8 -*- #http://tieba.baidu.com/p/2460150866 #抓取图片地址 from bs4 import BeautifulSoup import urllib.request from time import sleep html_doc = "http://tieba.baidu.com/p/2460150866" def ge

  • 详解node.js 下载图片的 2 种方式

    具体代码如下所示: var request=require("request"); var fs=require("fs"); function download1(url,filename,fn){ request(url).pipe(fs.createWriteStream(filename).on("close",function(err,res){ if(err){ console.log(err); }else{ fn&&

  • vue 动态改变静态图片以及请求网络图片的实现方法

    在本身的项目中需要动态请求后端图片 一般需要在created中写因为beforeCreate的时候图片过不来的,如果想在这时候请求数据那么图片的地址我们就要存在一个地方.可以是本地也可以是vuex中 静态图片想要动态的添加或者改变我们需要改变图片的目录结构 把图片放在static中然后 imgUrl : ['/static/clinical.png','/static/nursing.png','/static/function.png','/static/test.png','/static/

随机推荐