网页设计中图片滤镜效果图_网页设计中如何实现"单个图片"的滤镜属性

1、网页设计中，滤镜是啥意思啊？怎么使用呢？

滤镜是css样式表里的一种，可以实现渐变、透明度等效果，不过这种效果只有ie浏览器支持，实际应用中并不多，具体建议找专门的css样式表教程学下

我的小ad：五星网络，提供稳定快速的虚拟主机服务，即买即用，不需等待备案。

2、怎么在网页设计中对插入的图片进行css滤镜的设置，我怎么设置出来都是背景有变化啊

术处理一下，再放到你做的网站上就行，我只理论研究过，没实践过，所以你到网上搜一下教程看看吧~

3、dreamweaver8.0中图片的静态滤镜效果制作一般方法和步骤是什么？

我先写一个模糊效果你看看
<img src="图片地址" style="filter:blur(add=add，direction，strength=strength)"

Add参数有两个参数值：true和false。意思是指定图片是否被内改变成模糊效果。容 Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度

别忘了给分呀

4、网页设计中javascript——滤镜效果

HTML基本代码，咱不多说，相信你也懂……
说说JS部分，
变量 i 是用来代表将要上场的图片的，【document.getElementById("img1").src="img/"+i+".jpg"; //设置该图片容器中的图片，根据I的值修改图片】这段代码控制上场的图片，（这里也有个要求，就是要求你希望上场的图片的名都是类似1.jpg、2.jpg、3,jpg、4.jpg……这样的规则的，并且是放在img这个目录下的）。
【if(i>11) {i=1;} 】这段开始部分的代码，意味着，将要上场的图片最多是11张；
变量 j 是用来代表滤镜效果类型的，所以【var j=Math.random()*22+1;//图片随机产生】这个的注释是错误的，应该是“控制滤镜效果随机产生”。
接下来，【document.getElementById("img1").style.filter="RevealTrans (Transition="+j+")"; //设置IMG1这个放图片的容器的动态随机滤镜效果】正如注释所写，是为IMG1这个容器添加滤镜效果的。假如，j=20，那代码不就是【document.getElementById("img1").style.filter="RevealTrans (Transition=20)"; 】了？其中【.style.filter="RevealTrans (Transition=20)"】就是添加滤镜的关键代码，函数RevealTrans和其参数Transition，你需要再多去看看相关资料就能明白了。
IE下的滤镜变换效果有很多，似乎总共有22种，这里Transition=20就是选择其中的一种而已嘛，就这么简单。
【document.getElementById("img1").src="img/"+i+".jpg"; 】就是为IMG1这个容器添加图片，不多解释了。
总之，JS部分的代码实现两个功能，第一是为IMG1添加滤镜效果并应用和启动这个效果，第二是添加图片（也就是图片的地址嘛）。你对不懂的地方，我想应该是容器的 filter 属性，你需要自己去查看相关资料了。

最后我要提醒你的是，这个滤镜效果只有在IE下有效，别的浏览器是没任何效果的。

补充：
+i+、+j+：这里的加号是链接符，表示把两边的字符串链接起来；
看源代码中， "img/"+i+".jpg"，这里的 i 不就是个变量而已嘛，假如现在i=5，那么这段代码不就是 "img/"+5+".jpg"，最后的结果就是 "img/5.jpg"。
“+”号能作为算术运算符，也能作为字符串的链接符，例如++i，j++就是算术运算符，产生的结果是变量自加1吧，又例如"abc"+"def"就是字符串链接符，产生的结果就是把这两个字符串链接起来，结果是"abcdef"。

如果这块你看不懂，我觉得你的程序基础知识似乎还差不少啊，再多看看

5、网页效果图怎么制作？

　平面广告和网站页面设计的宗旨就是吸引眼球，符合平面视觉冲击特点，如何设计一款有特色、另类能吸引眼球的作品是摆在平面设计人员和photoshop爱好者面前的难题

现在以一款网页平面设计效果图为实例，讲解网页设计方面的创意知识，从网页效果图布局创意、颜色选择，裁减效果图和制作网页特效等方面来学习。下面我们就一起来学习吧。

首先声明一下，这款网页效果图在得到朋友许可后拿来制作教程实例，切勿抄袭和用做其他用途。先看效果图0。

一、创意设计思路

一个网站在制作前需要确定网站风格、网站主题、和主色调，在没有确切的方案之前，最好不要贸然动手制作，不然最后的结果很可能是以失败而告终。

笔者决定从关键字"路行""独自行走"加上是暗色系的要求上下手，敲定颜色采用沙漠黄，沙漠很容易让人联想到孤单；板式确定为户外广告的样式沙漠黄配合生锈的广告牌。符合"颓废""艰辛路途"主题。

二、网站效果图及LOGO的制作。

1、LOGO的样式采用的是图形和字符的组合。汉字LOGO的字体不是下载的字体，是笔者用钢笔工具画出来的字体。如图1和1-1。

　钢笔工具勾勒出图1的行走的人样式，填充红色，然后调整混合模式"斜面和浮雕"选择浮雕效果、雕刻清晰、深度1、方向上、大小2，其他默认。这LOGO 的创意是，一个人在崎岖不平的路上坚持自己的方向，配合网站的英文加中文名字，构成一个形象LOGO，刚好"路"字和"行"字采用红色，突出了路行。

文字LOGO笔者用钢笔工具勾画出字的各个部件，然后拼接在一起，这里只给出"路"字的方法，"行"字方法如同。[next]

2、制作布局参考图。如图2

　3、根据布局效果图，新建文件大小1000X765，填充黑色。布局中的"显示区域"为广告牌是要挂到墙上的，使用"石头材质"放置在页面最上方来制作石板墙；使用"锈迹皮革材质"制作"显示区域""LOGO"区域的边框（注：一些材质的制作方法省略，平时可自行制作也可去图片站下载保存，用的时候方便），将LOGO区域的边框复制一层，调整不透明度为60%放置到LOGO曾下方，这样大体的框架就完成了。如图3和3-1。

（图5）

（图6）

4、找来一张沙漠公路的图片，把这张图片进行聚焦处理。点图4示例的按扭进入"以快速蒙版编辑模式"，选择渐变，渐变模式为"径向渐变"在图中间向两边拉，屏幕会出现一团红色；然后再点"以标准模式编辑"画面会出现一个圆圈选择区域，按"DELETE"删除即可。如图4和图4-1。

（图7）

（图8）

　5、在"路"图片上方新建一层，按住CTRL+"路"图层，单击新建的图层，填充颜色4E341B，调整为暗系沙漠黄。如图5。

（图9）

制作文字LOGO牌。找来图5-1中的灰色材质，在"LOGO边框"下面新建一层，然后在其之上新建一层，放置沙漠图片，将其混合模式修改为"颜色"然后打开一开始制

6、网页设计中如何实现"单个图片"的滤镜属性

在img里插入 class=img

7、有些网页里的图片滤镜切换特效没有用到FLASH 好像是用JS来完成的代码该是怎么写的呢？

<html> <head> <title>图片淡入淡出</title> <style type="text/css">  </style> </head> <body> <script language="javascript"> function img1(x){ // 获取数组记录数 this.length=x; } //申明数组并给数组元素赋值，也就是把图片的相对路径保存起来 //若是图片较多，可增加数组元素的个数， //在这个例子中用了五张图片，所以数组元素个数为“5"。 iname=new img1(5); iname[0]="photo/01.jpg"; iname[1]="photo/02.jpg"; iname[2]="photo/03.jpg"; iname[3]="photo/04.jpg"; iname[4]="photo/05.jpg"; var i=0; function play1(){ // 演示变换效果 if (i==4){ i=0; } //当进行到iname[4]时，返回iname[0] else{ i++; } tp1.filters[0].apply(); //tp为图像的name，在<img>标记中定义 tp1.src=iname[i]; tp1.filters[0].play(); mytimeout=setTimeout("play1()",4000); //设置演示时间，这里是以毫秒为单位的，所以“4000 ”是指每张图片的演示时间是4秒 //这个时间值要大于滤镜中设置的转换时间值，这样当转换结束后还能停留一段时间，看清楚图片。 } </script> <p><img src="photo/04.jpg" name="tp1"></p> <script language="javascript">play1();</script> </body> </html>

8、如何用CSS3制作图片滤镜

用CSS3制作图片滤镜的简单实例：
<!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><style type="text/css">.retro{ -webkit-box-shadow:inset 0px 0px 100px rgba(0,0,20,1); background:-webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%),-webkit-linear-gradient(20deg,rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%); -moz-box-shadow:inset 0px 0px 100px rgba(0,0,20,1); background:-moz-linear-gradient(top,rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%),-moz-linear-gradient(20deg,rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%); display:table;}.retro img{ -webkit-filter:sepia(20%) brightness(10%) contrast(130%); position:relative; z-index:-1; }div{ float:left;}</style></head><body><div><h3>处理前</h3><img src="图片地址"></div><div class="retro"><h3>处理后</h3><img src="图片地址"></div><br></body></html>

9、我期望增加一种网页上的图片滤镜特效

用CSS就可以轻松实现，只是要增加一个遮罩层
比如：
//这里是最外层的框
<div style="width:300px;height:300px;position:relative;" >
//这里是图片的框

<div style="width:100%;height:100%;position:absolute;left:0px;top:0px;" >

//这里就是图片；

<img src="xxxxxx" >

</div>

//这里是遮罩,并且设置背景黑色，设置半透明

<div style="width:300px;height:300px;position:absolute;left:0px;top:0px;background:black;opacity: 0.5;filter:alpha(opacity=50)" ></div>

//这里就是要显示到遮罩上面的内容

<div style="width:300px;height:300px;position:absolute;left:0px;top:0px;text-align:center;" >
这里是一个播放的图片

</div>
</div>

写的粗陋了一点，如果你需要css控制显示隐藏，就全部写在样式里面
<style>
.xxx{} //外框
.xxx:hover->.aa{display:block}//遮罩
.xxx:hover->.bb{display:block}//内容
</style>

这样子，望采纳

10、现在网页中出现图片的灯光效果，淡入淡出，滤镜效果，是通过什么实现的

一般来说是使用来 js 控制 css 实现自的，不排除，有些可能直接使用的是ps 处理过的图片，ps 处理过图片效果要好一些，不过在网页中是静态的，而 js + css 可以根据需求动态控制图片的样式，实现多样的动态效果，缺点就是图片的效果没有ps 处理过的好
现在主流当然是使用 js + css 去控制，现在的网页要求交互性，动态性比较高，使用ps 处理只能单独处理图片效果，而在js 控制下 css3 可以改变网页的全部，可以改变图片，文字，排版，网页内容

导航:首页 > 万维百科 > 网页设计中图片滤镜效果图

网页设计中图片滤镜效果图

与网页设计中图片滤镜效果图相关的知识