網頁設計半透明_圖示的網頁透明效果是怎樣實現的

1、如何做半透明網頁設計才會顯得高大上

使用半透明元素來設計網頁很美觀也很需要技巧。半透明效果是指色塊、文字或圖片被“稀釋”或者沖淡，使得顏色減淡，並且透出後方內容執行到位的話，這種效果會非常震撼，能劃出一塊絕佳的文字展示區域，或者作為吸引注意力至圖像某部分的手段但是使用半透明時，設計師必須小心謹慎。這種效果很難處理得當，因為事關可讀性。透明度使用錯誤的半透明塊和文字也，會能散注意力，並且破壞整體設計效果接下來看一套行為准則，附帶一些半透明效果在網站上的優秀執行案例通過半透明來形成對比選用半透明設計技巧的最大好處，是創造對比。這種效果可以讓設計師通過色塊、圖片上的大字體或多種顏色層次來創造視覺焦點半透明也可以在背景圖不能很好展現上方文字時，將文字分離開來使用半透明設計時尤其需要考慮對比。只有圖片(或背景)和文字都可讀時，半透明效果才是有意義的。當你考慮使用半透明效果時，問問自己：這是否有助於用戶對圖文的理解? 避免遮擋圖片的重要部分半透明效果不應該遮擋其下方背景或圖片的重要部分。決定半透明層位置的時候，要清楚你“犧牲”了什麼內容用不同的透明度沒有完美的透明度值。對於某些項目，80%透明度比較理想;對於其他的也許15%才是最佳選擇。對每個項目採用不同的透明度不要覺得半透明就能讓文字更易讀使用半透明色塊來襯托文字並不意味著文字會自動變得易讀。要考慮對比——半透明色塊與文字、背景圖與半透明色塊兩方面都要考慮半透明效果用在圖片、色塊或文字上時，考慮文字的可讀性至關重要。切記，如果設計效果致使文字難以辨認，你的信息將無從傳達在細節處使用半透明效果半透明並非只適用於網站的主體部分。這種效果在細節處也能大放異彩可以考慮用半透明來展示導航工具欄，或者作為按鈕和可點擊元素的滑鼠懸停效果。多種透明度不要使用過度。選定一種元素和透明度樣式，然後使它貫穿整個網站的設計不要在對比強烈的圖片上放置半透明元素處於可讀性考慮，最好避免在已經包含強烈對比的元素上使用半透明效果——比如黑白對比或色盤上的互補色因為要在背景的各個部分都達到正確的效果很難，想在這類元素上使用半透明效果，除非強烈對比在你的設計中真的只起到負面作用。考慮用淺色塊代替吧將半透明作為一種藝術手法半透明不只是次要效果。可以考慮用這個效果為你的網站設計主畫面大尺寸半透明創造的對比、強調和視覺吸引令人震撼不要將半透明作為裝飾物使用半透明效果並非為了打破設計中的單調。把這種效果作為裝飾物使用，註定會導致糟糕的設計半透明效果的使用應該事先考慮和規劃好。半透明不是加粗這類簡單效果，處理不當看起來會很草率且不專業在背景中使用半透明不只是設計前景元素時可用半透明效果，它也能用在背景圖上。有些非常棒的半透明元素精細微妙還有些半透明效果夾在圖像層之間。例如Tony Chester的網站，就用了絕妙的半透明分層技巧打造了一件多維度的設計不要同時運用過多半透明效果在每個項目中有節制地使用不同類型的半透明效果。透明度要能製造反差對比，產生視覺吸引力。這樣使用過多的差異化效果，會分散用戶注意力在輪播圖片上使用半透明元素半透明的使用不限於單頁網站或靜止網站。它在變化的圖片和背景上也起作用。兩種方式都可以用上半透明效果在輪播圖片上使用半透明，是該效果最棘手的用法之一。卻也最令人印象深刻。慎重考慮多張背景圖的情況。選用顏色和對比搭配相近的圖片，這樣只需一種半透明效果即可應對後方移動變換的背景格外注意半透明效果與每張圖的匹配程度，才能保證每張圖的整體性，並創作出易辨認的照片或其他背景與文字，保持視覺統一小結嘗試半透明效果，是拓展設計技巧的一個絕妙方法。像很多其他效果一樣，要有節制地使用這個技巧，並且在多種環境下實驗這種設計，來確保它按你的意圖運作和展現半透明設計的最大挑戰，是在輪播圖片上使用時確保文字清晰可讀，和避免半透明元素錯誤地遮擋下方圖片嘗試多種透明度和使用方式——用於圖片、背景、遮罩效果——來決定那種效果最適合某個項目

2、如何製作半透明圖片？

Microsoft
Office
工具里有，我常用word文檔有一個更改透明度，在圖片屬性里
就比如這樣。回先打開word文檔，在繪答圖工具里使用矩形，然後定一下大小，再往裡面填充。「設置自選圖形格式」，把顏色換成填充效果（第四個是圖片）。選好後下面一條就是調整透明度，把條碼往右拉就行了，最後就是樓主想辦法把完成的圖片弄到畫圖里（畫紙小一點），可以在完成時按截屏鍵「Print
Screen/SysRq」（F12右邊），在畫圖工具里粘貼，在把圖片截掉新建一個，再粘貼（畫紙需和圖片一樣大），另存為，就好啦！最好是JPEG圖像。希望採納！(*^__^*)

3、網頁設計中如何使顏色呈半透明狀態

CSS代碼
.test{
background:#000;
color:white;
width:200px;
position:absolute;
left:10px;
top:10px;
filter: Alpha(opacity=10);
-moz-opacity:.1;
opacity:0.1;
}

4、Dreamweaver製作網頁滑鼠經過圖像出現文字還是背景半透明的，怎麼做？

首先設置一個div對象，用CSS樣式設置img為背景圖片，同時設置隱藏標簽，然後在錨文本寫下顯示的文字，設置背景樣式為半透明filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}，最後設置滑鼠經過圖片的時候才會顯示文字內容。

所寫代碼為：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滑鼠放圖片上時出現文字</title>
<style>
.fm{ position:relative;width:150px; height:150px;margin:0 auto} /*設置div的相對定位，寬高居中*/
.fm span,a{display:none;text-decoration:none;}/*隱藏文字,去掉下劃線樣式*/
.fm:hover a.mm{ position:absolute; top:0; width:100%; height:100%;
z-index:100; left:0; display:block;}/*設置絕對定位*/
.fm:hover span{ display:block;position:absolute; bottom:0; left:0;color:#CCCCCC;width:150px;z-index:10;height:25px; line-height:25px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}
/* 設置顯示文字定位位置，標簽寬度與對象寬度相同，設置一定高度，設置css背景為半透明背景顏色。 */
</style>
</head>
<body>
<div class="fm" style="background:url(123/2.png)">
<span>我是一隻開心的肥貓</span>
<a href="#" class="mm"> </a>
</div>
</div>
</body>
</html>

瀏覽效果圖為：

以上就是用Dreamweaver製作出滑鼠經過圖像出現文，背景半透明的效果。

5、如何製作半透明網頁?

朋友。你問的是設計圖怎麼實現，還是設計之後CSS或JS怎麼實現？
如果是設計圖時。調整圖層透明即可。。
如果是CSS問題，給除body之外的標簽的樣式加上 filter:alpha(opacity=50);
以上的50的值是自己改的，0至100的alpha值。

6、圖示的網頁透明效果，是怎樣實現的？

第一種：加入帶有顏色的遮罩一樣的半透明效果。
源代碼為:
<STYLE type=text/css>
.bodyBg {background:#transparent;filter:progid:DXImageTransform.Microsoft.gradient(GradientType ='1',enabled='true',startColorstr=#AAFFFFFF, endColorstr=#AAFFFFFF);}
</STYLE>
代碼中：startColorstr=#AAFFFFFF 前面的AA是透明度，修改成FF是不透明，00是全透明，後面的 FFFFFF 是顏色，就是說在上面蒙什麼顏色的東西，正常使用這個效果startColorstr=#AAFFFFFF和 endColorstr=#AAFFFFFF 後面的=#AAFFFFFF數值要一樣!

2.簡易透明效果。
將上面的渲染方式改為：filter:alpha(opacity=80)，80是透明值，100為不透明，0為全透明。

3.其實CSS還有很多其他的渲染方式~付上其他的一些渲染代碼。
黑白照片 filter: gray;
X光照片 filter: Xray;
風動模糊 filter: blur(add=true,direction=45,strength=30);
正弦波紋 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
線型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻轉 filter: fliph;
垂直翻轉 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
馬賽克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
發光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔邊效果 filter:alpha(opacity=100, finishOpacity=0,style=2

7、關於網頁設計裡面圖片透明的問題？

在ie8中或比較新的瀏覽器重是自動透明的，
在ie6或大多數普通瀏覽器中是不透明的，所以給你個方法http://www.lanrentuku.com/js/css-713.html

8、本人是外行不懂網頁設計，請問大神如何用css設置瀏覽器半透明？求詳細步驟。

瀏覽器是不能設置半透明的，除非瀏覽器廠商提供了半透明選項，像迅雷版7一樣可以設置權半透明背景，不知道你所說的是不是網頁半透明，那就在CSS里給你想實現半透明的添加樣式
opacity:.5;
filter:Alpha(opacity = 50);

9、如何製作在網頁上半透明的PNG純色圖?

用抄photoshop，新建一個圖像，純色填充。在圖層面板裡面雙擊再確定解鎖這個圖層，然後將這個圖層的透明度調成50%（可根據需要自己調整）。保存格式為png。網頁裡面將div的背景圖像設置為這個png即可。
PS：png透明在IE6下不可用。IE6下如果要實現這種效果比較麻煩。
如果有問題可以追問或者Hi聯系。

導航:首頁 > 萬維百科 > 網頁設計半透明

網頁設計半透明

與網頁設計半透明相關的知識