十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
DIV背景顏色怎么設(shè)置透明度,很多新手對此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括橫縣網(wǎng)站建設(shè)、橫縣網(wǎng)站制作、橫縣網(wǎng)頁制作以及橫縣網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,橫縣網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到橫縣省份的部分城市,未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
設(shè)置DIV背景顏色透明度
通常我們通過DIV的style樣式屬性filter來設(shè)置DIV背景透明樣式??筛鶕?jù)alpha提供的如下參數(shù)進(jìn)行組合控制:
filter:Alpha(enabled=bEnabled,style=iStyle, opacity=iOpacity,finishOpacity=iFinishOpacity, startX=iPercent,startY=iPercent, finishX=iPercent,finishY=iPercent);
各參數(shù)含義如下:
enabledEnabled設(shè)置或檢索濾鏡是否激活。
styleStyle設(shè)置或檢索DIV背景透明漸變的樣式。
opacityOpacity設(shè)置或檢索透明漸變的開始透明度。
finishOpacityFinishOpacity設(shè)置或檢索DIV背景透明漸變的結(jié)束透明度。
startXStartX設(shè)置或檢索DIV背景透明漸變開始點(diǎn)的水平坐標(biāo)。
startYStartY設(shè)置或檢索DIV背景透明漸變開始點(diǎn)的垂直坐標(biāo)。
finishXFinishX設(shè)置或檢索DIV背景透明漸變結(jié)束點(diǎn)的水平坐標(biāo)。
finishYFinishY設(shè)置或檢索DIV背景透明漸變結(jié)束點(diǎn)的垂直坐標(biāo)。
Opacity代表透明度等級(jí),可選值從0到100,0代表完全透明,100代表完全不透明。Style參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀;1代表線形;2代表放射狀;3代表長方形。
Finishopacity是一個(gè)可選項(xiàng),用來設(shè)置結(jié)束時(shí)的透明度,從而達(dá)到一種漸變效果,它的值也是從0到100。StartX和StartY代表漸變透明效果的開始坐標(biāo),finishX和finishY代表漸變透明效果的結(jié)束坐標(biāo)。
從上面講的我們可以看出,如果不設(shè)置透明漸變效果,那么只需設(shè)置opacity這一個(gè)參數(shù)就可以了。說了這么多,我們來看一個(gè)實(shí)例吧(見下圖):
實(shí)現(xiàn)上面這種效果的代碼如下:
alpha Beautiful//*定義字體屬性,前景色為紅色*// //*導(dǎo)入一張圖片*//
如果在上面的代碼中稍做改動(dòng),則將產(chǎn)生另外多種效果。我們只修改img的樣式屬性,把head中的Img樣式屬性代碼改為如下所示:
img{position:absolute;top:20;left:40; filter:alpha(opacity=0,finishopacity=100, style=1,startx=0,starty=85,finishx=150,finishy=85);} //*設(shè)置DIV背景透明漸變效果,起始坐標(biāo),終止?jié)u變坐標(biāo),并設(shè)置透明樣式值(style=1)為 線形*//
這段代碼產(chǎn)生的效果如左下圖所示,右面的兩幅圖分別是把Alpha中的Style參數(shù)值為2和3后的效果,點(diǎn)擊縮略圖可放大。
Style=1 Style=2Style=3
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)的支持。