溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
DIV背景顏色怎么設置透明度，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
設置DIV背景顏色透明度
通常我們通過DIV的style樣式屬性filter來設置DIV背景透明樣式。可根據alpha提供的如下參數進行組合控制：
filter:Alpha(enabled=bEnabled,style=iStyle, opacity=iOpacity,finishOpacity=iFinishOpacity, startX=iPercent,startY=iPercent, finishX=iPercent,finishY=iPercent);
各參數含義如下：
enabledEnabled設置或檢索濾鏡是否激活。
styleStyle設置或檢索DIV背景透明漸變的樣式。
opacityOpacity設置或檢索透明漸變的開始透明度。
finishOpacityFinishOpacity設置或檢索DIV背景透明漸變的結束透明度。
startXStartX設置或檢索DIV背景透明漸變開始點的水平坐標。
startYStartY設置或檢索DIV背景透明漸變開始點的垂直坐標。
finishXFinishX設置或檢索DIV背景透明漸變結束點的水平坐標。
finishYFinishY設置或檢索DIV背景透明漸變結束點的垂直坐標。
Opacity代表透明度等級，可選值從0到100，0代表完全透明，100代表完全不透明。Style參數指定了透明區域的形狀特征。其中0代表統一形狀；1代表線形；2代表放射狀；3代表長方形。
Finishopacity是一個可選項，用來設置結束時的透明度，從而達到一種漸變效果，它的值也是從0到100。StartX和StartY代表漸變透明效果的開始坐標，finishX和finishY代表漸變透明效果的結束坐標。
從上面講的我們可以看出，如果不設置透明漸變效果，那么只需設置opacity這一個參數就可以了。說了這么多，我們來看一個實例吧（見下圖）：
實現上面這種效果的代碼如下：
<html> <head> <title>alpha</title> <style>//*定義CSS樣式*// <!-- DIV{position：absolute；left：50；top：70；width：150；} //*定義DIV區域內的樣式（位置為絕對定位，left、top、width的坐標）*// img{position：absolute；top：20；left：40； filter：alpha(opacity=80)} //*定義圖片的樣式，絕對定位，濾鏡屬性是透明度為80*// --> </style> </head> <body> <DIV> <pstylepstyle=“font-size：48；font-weight：bold；color：red；”> Beautiful</p>//*定義字體屬性，前景色為紅色*// </DIV> <p><imgsrcimgsrc=“ss01076.jpg”></p> //*導入一張圖片*// </body> </html>如果在上面的代碼中稍做改動，則將產生另外多種效果。我們只修改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);} //*設置DIV背景透明漸變效果，起始坐標，終止漸變坐標，并設置透明樣式值（style=1）為 線形*//這段代碼產生的效果如左下圖所示，右面的兩幅圖分別是把Alpha中的Style參數值為2和3后的效果，點擊縮略圖可放大。
Style=1 Style=2Style=3
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
