漸變背景(background)效果

2022-08-17 16:24:20 字數 2900 閱讀 6759

chrom and safari瀏覽器:

webkit核心的瀏覽器。使用css3漸變方法(css-gradient)

-webkit-gradient(type, start_point, end_point, /

stop...)

-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, /

stop...)

background

: -webkit-gradient(linear,00

,0100%

,from(

#2777ec

),to(

#6ac1fc))

;-webkit-gradient是webkit引擎對漸變的實現引數,一共同擁有五個:

第乙個引數表示漸變型別(type)。能夠是linear(線性漸變)或者radial(徑向漸變)。

第二個引數和第三個引數,都是一對值。分別表示漸變起點和終點。這對值能夠用座標形式表示,也能夠用關鍵值表示。比方 left top(左上角)和left bottom(左下角)。

第四個和第五個引數,各自是兩個color-stop函式,color-stop函式接受兩個引數。第乙個表示漸變的位置。0為起點,0.5為中點,1為結束點;第二個表示該點的顏色;

firefox瀏覽器:

firefox3.6+以後版本號改進了非常多css,firefox支援兩種型別的css漸變:線性的(-moz-linear-gradient)和放射狀的(-moz-radial-gradient)

線性漸變(linear gradients)

要建立乙個線性漸變,您須要設定乙個起點和乙個漸變的方向(或角度),並定義起止顏色

-moz-linear-gradient(

[ || ,

]? ,[,

]*)徑向漸變(radial gradients)

為徑向漸變的語法很類似於線性漸變

-moz-radial-gradient(

[ || ,

]?[ || ,]?,

[,]*

)background

: -moz-linear-gradient(

#2777ec

,#6ac1fc);

-moz-linear-gradient有三個引數:

第乙個引數表示線性漸變的方向,top是從上到下、left是從左到右,假設定義成left top,那就是從左上角到右下角。

第二個和第三個引數各自是起點顏色和終點顏色。

你還能夠在它們之間插入很多其它的引數。表示多種顏色的漸變。

萬惡的ie瀏覽器:

ie瀏覽器下漸變背景的使用須要使用ie的漸變濾鏡

filter: progid:dximagetransform

.microsoft.gradient(startcolorstr=

red,endcolorstr=

blue

,gradienttype=1)

上面的濾鏡**主要有三個引數:

依次是:startcolorstr, endcolorstr, 以及gradienttype。當中gradienttype=1代表橫向漸變,gradienttype=0代表縱向淅變;

startcolorstr=」色彩」 代表漸變漸變起始的色彩。endcolorstr=」色彩」 代表漸變結尾的色彩。

上面**實現的是紅色至藍色的漸變。可是不含透明度變化,這是因為ie眼下尚未支援opacity屬性以及rgba顏色。要實現ie下的透明度變化,還是須要使用ie濾鏡。ie的透明度濾鏡功能比較強大,這樣的強大反而與firefox或是safari瀏覽器下的css-gradient背景漸變的使用方法類似。比如以下的使用:

filter:alpha(opacity=

100 finishopacity=

0 style=

1 startx=

0,starty=

5,finishx=

90,finishy=60)

各個引數的含義例如以下:

opacity表示透明度。預設的範圍是從0 到 100。他們事實上是百分比的形式。也就是說,0代表全然透明,100代表全然不透明。

finishopacity 是乙個可選引數,假設想要設定漸變的透明效果,就能夠使用他們來指定結束時的透明度。

範圍也是0 到 100。

style用來指定透明區域的形狀特徵:

0 代表統一形狀

1 代表線形

2 代表放射狀

3 代表矩形。

startx 漸變透明效果開始處的 x座標。

starty 漸變透明效果開始處的 y座標。

finishx 漸變透明效果結束處的 x座標。

finishy 漸變透明效果結束處的 y座標。

opera瀏覽器:

opera新版和firfox原理使用方法一樣:

background

: -o-linear-gradient(

#2777ec

,#6ac1fc);

整理相容性的漸變背景效果:

.button

.button

:active

,.button

:focus

class

="button"

type

="button"

value

="點選按鈕"

/>

class

="button"

href

="/">鏈結按鈕

a>

class

="button">點選按鈕

span

>

background 線性漸變

background linear gradient direction,color stop1,color stop2,linear gradient to left right top bottom 取值 下述值用來表示漸變的方向,可以使用角度或者關鍵字來設定 順時針方向角度 用角度值指定漸變的...

背景(background)屬性

background 背景屬性 background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動background color 設定背景顏色 color 指定背景顏色 transparent 預設。背景顏色透明 inherit 從父元素繼承 url 影象路徑 none 預設。...

設定行背景 CSS 背景 background

css 可以新增背景顏色和背景,以及來進行設定。background color 背景顏色 background image 背景位址 background repeat 是否平鋪 background position 背景位置 background attachment 背景固定還是滾動 背景的...