亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

div 背景透明度 如何設(shè)置一個(gè)div的背景透明度

  發(fā)布時(shí)間：2012-12-31 16:55:48   作者：佚名   我要評(píng)論
如何設(shè)置一個(gè)div的背景透明度,對(duì)于一些新手朋友有些陌生，接下來(lái)詳細(xì)介紹實(shí)現(xiàn)方法，有需要了解的朋友可以參考下

你讀DIV背景顏色透明度的設(shè)置是否熟悉，這里和大家簡(jiǎn)單分享一下，通常我們通過(guò)DIV的style樣式屬性filter來(lái)設(shè)置DIV背景透明樣式，也可根據(jù)alpha提供的參數(shù)進(jìn)行組合控制。

本節(jié)向大家愛(ài)描述一下如何設(shè)置DIV背景顏色透明度，opacityOpacity設(shè)置或檢索透明漸變的開(kāi)始透明度，Opacity代表透明度等級(jí)，可選值從0到100，0代表完全透明，100代表完全不透明。Style參數(shù)指定了透明區(qū)域的形狀特征。

設(shè)置DIV背景顏色透明度

通常我們通過(guò)DIV的style樣式屬性filter來(lái)設(shè)置DIV背景透明樣式?？筛鶕?jù)alpha提供的如下參數(shù)進(jìn)行組合控制： 

復(fù)制代碼
代碼如下:

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è)置或檢索透明漸變的開(kāi)始透明度。

finishOpacityFinishOpacity設(shè)置或檢索DIV背景透明漸變的結(jié)束透明度。

startXStartX設(shè)置或檢索DIV背景透明漸變開(kāi)始點(diǎn)的水平坐標(biāo)。

startYStartY設(shè)置或檢索DIV背景透明漸變開(kāi)始點(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代表長(zhǎng)方形。

　Finishopacity是一個(gè)可選項(xiàng)，用來(lái)設(shè)置結(jié)束時(shí)的透明度，從而達(dá)到一種漸變效果，它的值也是從0到100。StartX和StartY代表漸變透明效果的開(kāi)始坐標(biāo)，finishX和finishY代表漸變透明效果的結(jié)束坐標(biāo)。
從上面講的我們可以看出，如果不設(shè)置透明漸變效果，那么只需設(shè)置opacity這一個(gè)參數(shù)就可以了。說(shuō)了這么多，我們來(lái)看一個(gè)實(shí)例吧（見(jiàn)下圖）：

DIV背景顏色透明度

實(shí)現(xiàn)上面這種效果的代碼如下：

復(fù)制代碼
代碼如下:

<html>
<head>
<title>alpha</title>
<style>//*定義CSS樣式*//
<!--
DIV{position：absolute；left：50；top：70；width：150；}
//*定義DIV區(qū)域內(nèi)的樣式（位置為絕對(duì)定位，left、top、width的坐標(biāo)）*//
img{position：absolute；top：20；left：40；
filter：alpha(opacity=80)}
//*定義圖片的樣式，絕對(duì)定位，濾鏡屬性是透明度為80*//
-->
</style>
</head>
<body>
<DIV>
<pstylepstyle=“font-size：48；font-weight：bold；color：red；”>
Beautiful</p>//*定義字體屬性，前景色為紅色*//
</DIV>
<p><imgsrcimgsrc=“ss01076.jpg”></p>
//*導(dǎo)入一張圖片*//
</body>
</html>

如果在上面的代碼中稍做改動(dòng)，則將產(chǎn)生另外多種效果。我們只修改img的樣式屬性，把head中的Img樣式屬性代碼改為如下所示 

復(fù)制代碼
代碼如下:

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=2   style=3

 　Style=1  　Style=2Style=3

以上是CSS的Alpha濾鏡屬性的應(yīng)用，具體應(yīng)用還需要您自己找個(gè)例子練一練。

Css-Tricks講到了一些方法，看了一些大型門(mén)戶網(wǎng)站的CSS，也是采用了這種方法，
http://css-tricks.com/rgba-browser-support/

也就是支持CSS3的瀏覽器就設(shè)置：
background:rgba(255,255,255,0~1)，
而低版本的IE瀏覽器就采用微軟的獨(dú)有的濾鏡來(lái)實(shí)現(xiàn)：
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorStr=#AARRGGBB,endColorStr=AARRGGBB);

使用方法：
GradientType: 漸變的方向 ，0為水平（默認(rèn)），1為垂直。
startColorStr：AA為透明度，范圍00~FF ..RRGGBB為十六進(jìn)制顏色值，不熟悉顏色值的朋友可以用PS自帶的拾色器來(lái)選擇。
endColorStr：同上

相關(guān)文章

  • div+css設(shè)置div的背景為半透明的方法

    設(shè)置div的背景為半透明，下面有個(gè)不錯(cuò)示例，使用div+css來(lái)實(shí)現(xiàn)下，不會(huì)的朋友可以參考下
    2014-02-13

  • DIV背景半透明文字不半透明的樣式

    DIV背景半透明，DIV中的字不半透明如何實(shí)現(xiàn)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以了解下
    2013-11-29

  • div背景半透明，覆蓋整個(gè)可視區(qū)域的遮罩層效果

    背景半透明，覆蓋整個(gè)可視區(qū)域的遮罩層效果在工作中經(jīng)常會(huì)遇到，這篇文章主要介紹了當(dāng)內(nèi)容超過(guò)一屏?xí)r如何做到多瀏覽器的兼容性。 下面我們通過(guò)一個(gè)簡(jiǎn)單的例子看看如何實(shí)現(xiàn)
    2011-12-08

  • div背景半透明 覆蓋整個(gè)可視區(qū)域的遮罩層效果

    背景半透明，覆蓋整個(gè)可視區(qū)域的遮罩層效果在工作中經(jīng)常會(huì)遇到，這篇文章主要介紹了當(dāng)內(nèi)容超過(guò)一屏?xí)r如何做到多瀏覽器的兼容性。 下面我們通過(guò)一個(gè)簡(jiǎn)單的例子看看如何實(shí)現(xiàn)
    2011-10-30

  • 設(shè)置div背景透明的方法示例

    這篇文章主要介紹了設(shè)置div背景透明的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)
    2021-02-20

最新評(píng)論