網頁設計中圖片濾鏡效果圖_網頁設計中如何實現"單個圖片"的濾鏡屬性

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 可以改變網頁的全部，可以改變圖片，文字，排版，網頁內容

導航:首頁 > 萬維百科 > 網頁設計中圖片濾鏡效果圖

網頁設計中圖片濾鏡效果圖

與網頁設計中圖片濾鏡效果圖相關的知識