图片滤镜的效果

一.图片的滤镜效果

准备:
插入图片后进入"原代码编辑"模式,找到插入的图片代码域,对其进行修改.

比如插入右图后点击"显示原代码",找到相应的代码.为:

<IMG src="http://blog.sina.com.cn/pic/56d016d6020000n3">

1.透明效果

格式:

<img src="图片地址" style="filter:Alpha(opacity=100,finishOpacity=0,style=0)">



<div style="filter:Alpha(opacity=100,finishOpacity=0,style=0) ;w
idth:宽;height:高"><img src="图片地址"></div>

涉及到的属性:修改数值对应即可

opacity:开始处的透明度

finishOpacity:结束处的透明度

style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明

效果:

opacity=50,finishOpacity=0,style=0

 opacity=100,finishOpacity=0,style=1

 opacity=100,finishOpacity=0,style=2

 opacity=100,finishOpacity=0,style=3

2.翻转效果

左右翻转格式:

<img src="图片地址" style="filter:FlipH">



<div style="filter:FlipH ;width:宽;height:高"><img src="图片地址"></div>

上下翻转格式:

<img src="图片地址" style="filter:FlipV">



<div style="filter:FlipV ;width:宽;height:高"><img src="图片地址"></div>

效果:

3.变调效果

灰调格式:

<img src="图片地址" style="filter:Gray">



<div style="filter:Gray ;width:宽;height:高"><img src="图片地址"></div>

X光效果:

<img src="图片地址" style="filter:Xray">



<div style="filter:Xray ;width:宽;height:高"><img src="图片地址"></div>

色彩对换:

<img src="图片地址" style="filter:Invert">



<div style="filter:Invert ;width:宽;height:高"><img src="图片地址"></div>

效果:

4.边框效果(来自小缘人)

发光:(color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度x2

滤镜高=图高+发光强度x2+10)

<div style="filter:Glow(color=#4A7AC9,strength=15);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

投影:(color为发光颜色代码,direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+25)

濾鏡高=图高40)

<div style="filter:Shadow(color=#4A7AC9,direction=135);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

阴影:(color为发光颜色代码,offX水平位移offY垂直位移(可正可负),滤镜宽=图宽+水平位移绝对值+10,滤镜高=图高+垂直位移绝对值+20)

<div style="filter:Dropshadow(color=#333333,offX=5,offY=5);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

模糊:(direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+15,濾鏡高=图高+30)

<div style="filter:Blur(direction=135);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

波形:(freq频率(>0)strength振幅强度(>0)lightstrength波峰强度(0~100愈高越黑)phase起始相位(0~100),滤镜宽=图宽+振幅强度x2

滤镜高=图高+振幅强度x2+10)

<div style="filter:Wave(freq=7,strength=9,lightstrength=5,phase=5);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

效果:

时间: 2024-10-30 10:11:12

图片滤镜的效果的相关文章

学习网页中的图片如何应用CSS的滤镜的效果

有时候,我们需要给网页中的图片加一些特殊的效果,比如透明.扭曲.阴影或者翻转等,我们一般都会想到用Photoshop等一些图形软件来处理,其实我们也可以利用CSS(层叠式样表)提供的一些滤镜来处理,这对于不熟悉Photoshop的网友来说,是非常好的一件事. 我们先从较简单的开始,介绍几个没有参数的滤镜. 1.Gray滤镜 Gray滤镜的作用是产生黑白效果 使用方法:<img src=www.ddvip.com" style="filter:gray"> 2.In

用Photoshop制作图片卷页效果

用Photoshop制作图片卷页效果 卷页效果是我们在设计图像中常用的一种修饰效果.不少滤镜都能做到,如由AVBros.公司出品的PageCurl,或大名鼎鼎的KPT等.但如果用过你就会发现,这些滤镜作出的效果过于死板,更重要的是不够逼真,一眼就看出人工的痕迹.所以只用过一次,我就放弃了.如果你和我一样,不喜欢滤镜的固定模式,而希望用一种更灵活的方式来表现你的图像,这篇教程也许会给你一些启示. 由于我们在这篇教程中会用到很多路径的知识,所以,在开始之前,我希望你已经能够较熟练的操纵Photosh

CSS的滤镜的效果详细介绍

有时候,我们需要给网页中的图片加一些特殊的效果,比如透明.扭曲.阴影或者翻转等,我们一般都会想到用Photoshop等一些图形软件来处理,其实我们也可以利用CSS(层叠式样表)提供的一些滤镜来处理,这对于不熟悉Photoshop的网友来说,是非常好的一件事. 我们先从较简单的开始,介绍几个没有参数的滤镜. 1.Gray滤镜 Gray滤镜的作用是产生黑白效果 使用方法: 以下是引用片段: <img src="a.gif" style="filter:gray"&

JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

 这篇文章主要介绍了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法,实例分析了javascript操作图片切换方向的幻灯片技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

CAGradientLayer实现图片渐变透明效果

CAGradientLayer实现图片渐变透明效果 要实现的效果如下: 源码: // // RootViewController.m // CAGradientLayer // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "YXGCD.h" @interface RootViewController () @property (n

jquery实现两个图片渐变切换效果的方法

  本文实例讲述了jquery实现两个图片渐变切换效果的方法.分享给大家供大家参考.具体如下: 这段代码演示了jquery如何实现两个图片渐变切换的效果,为id=kitten的div设置一个背景图片,通过jquery对div进行淡入淡出实现两个图片的渐变切换 html代码 ? 1 2 3 <div id="kitten"> <img src="/images/kitten.jpg" alt="Kitten" /> <

jquery实现焦点图片随机切换效果的方法

 这篇文章主要介绍了jquery实现焦点图片随机切换效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery实现焦点图片随机切换效果的方法.分享给大家供大家参考.具体如下: 1. 运行效果如下图所示: 2.完整实例代码点击此处本站下载. 3.完整代码如下:   代码如下: <!DOCTYPE html> <html lang="en"> <head&g

JavaScript教程:详细解析网页图片预览效果

随着浏览器安全性的提高,要实现图片预览也越来越困难.不过群众的智慧是无限的,网上也有很多变通或先进的方法来实现.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果. 兼容:ie6/7/8, firefox 3.5.5后台支持下还兼容:opera 10.10, safari 4.0.4, chrome 3.0 详细程序说明和效果预览请看这里: 完整实例下载(asp.net版) 完整实例下载(asp版)

鼠标响应显示图片的动画效果

在三联教程这个学习网里,将和大家分享一下,如何应用一些简单的方法,就可以做出一个非常酷的鼠标响应显示图片的动画效果. 1.在这里我们只要新建一个actionscript 2.0文档就行了.接下来我们新建一个300*360象素大小的文档,帧频为12fps. 2.使用矩形工具画出一个带有白色边框的矩形,大小为300*300px;接下来,我们选择右击鼠标,在弹出的菜单选择"转换为元件"转换成"影片剪辑",名字可以随意命名.但是要注意一点,其属性的命名:"view