1、css如何實現真正的網頁漸變背景
在background-image屬性中使用linear-gradient()。
background-image:<bg-image> [ , <bg-image> ]
<bg-image> = <image> | none
默認值:none
適用於:所有元素
繼承性:無
動畫性:否
計算值:指定值
取值:
none:無背景圖。
<image>:使用絕對或相對地址指或者創建漸變色來確定圖像。
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
取值:
下述值用來表示漸變的方向,可以使用角度或者關鍵字來設置:
<angle>:
用角度值指定漸變的方向(或角度)。
to left:
設置漸變為從右到左。相當於: 270deg
to right:
設置漸變從左到右。相當於: 90deg
to top:
設置漸變從下到上。相當於: 0deg
to bottom:
設置漸變從上到下。相當於: 180deg。這是默認值,等同於留空不寫。
<color-stop> 用於指定漸變的起止顏色:
<color>:
指定顏色。
<length>:
用長度值指定起止色位置。不允許負值
<percentage>:
用百分比指定起止色位置。
說明:
用線性漸變創建圖像。
如果想創建以對角線方式漸變的圖像,可以使用 to top left 這樣的多關鍵字方式來實現。
2、如何使用網頁漸變色來提升設計逼格
直接用圖簡單;
通過使用 css3 漸變可以讓背景兩個或多個指定的顏色之間顯示平穩的過渡,由於用到css3所以需要考慮下瀏覽器兼容問題,例如:
從左到右的線性漸變,且帶有透明度的樣式:
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標準的語法 */
}
其中rgba()中的4個數字,前3個為顏色rgb,最後1個是透明度,取值0-1,0為透明,1為不透明。
3、WEB網頁頁面背景顏色漸變設置
頁面上實現漸變背景有兩種方法,一種是用背景圖片,一種是用代碼
如果漸變是自上而下的,並且漸變的頂部還想再加幅圖,如果你需要讓這幅圖和漸變背景色的過渡平滑自然。那麼,用背景圖片比較適合你的要求
把漸變部分,切成寬為1像素,高為漸變全部高度。假定存為"bg.gif"
將這個bg.gif作為網頁BODY區的背景圖,並且設計背景圖橫向重復平鋪。(注意的是,不要有縱向重復)
4、圖示的網頁透明效果,是怎樣實現的?
第一種:加入帶有顏色的遮罩一樣的半透明效果。
源代碼為:
<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
5、請專業美工進來,什麼叫漸變色碼?
簡單地說漸變色就是漸變顏色,就是一種顏色到另一種顏色的過度。你說的漸變色碼還是頭一次聽說,應該沒這詞兒吧。我覺得你要的色碼應該就是這兩種顏色的色值比如黑色#000到白色#FFF。
6、網頁設計中實現點擊圖片,圖片漸變的方法?
網路搜索javascript特效...
7、網頁設計製作員4級考題中利用JAVA腳本,讓背景色漸變,怎麼做?
<SCRIPTLanguage="JavaScript">script 和language間該空格<SCRIPT Language="JavaScript">這樣才能嵌入javascript腳本