css怎么設(shè)置透明度

1、filter：對(duì)win IE設(shè)置半透明濾鏡效果，filter:alpha(Opacity=80)代表該對(duì)象80%半透明，火狐瀏覽器不認(rèn)

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、蘭溪網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為蘭溪等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

2、-moz-opacity：對(duì)mozilla firefox火狐瀏覽器實(shí)現(xiàn)半透明，win IE不認(rèn)此屬性，-moz-opacity:0.5相當(dāng)于設(shè)置半透明為50%

3、opacity：對(duì)除IE外所有瀏覽器支持包括谷歌，放最后主要針對(duì)谷歌瀏覽器，opacity: 0.5;表示設(shè)置50%半透明

為了觀察到對(duì)DIV半透明實(shí)現(xiàn)，我們?cè)O(shè)置兩個(gè)DIV層，分別一個(gè)放于另外一個(gè)DIV層內(nèi)，外層DIV命名為“.div-a”;上面被包含的層CSS類命名為“.div-b”，形成“.div-b”盒子放于“.div-a”內(nèi)

我們對(duì)底層DIV設(shè)置一個(gè)背景是一張圖片，上面的DIV盒子設(shè)置村黑色。

二、未設(shè)置半透明樣式實(shí)例 - TOP

1、根據(jù)描述實(shí)例，未設(shè)置半透明HTML源代碼：

!DOCTYPE html

html

head

meta charset="utf-8" /

title半透明實(shí)例在線演示 ;/title

style

.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px;}

.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00}

/style

/head

body

div class="div-a"

div class="div-b"DIV半透明實(shí)例演示/div

/div

/body

/html

2、未設(shè)置半透明CSS樣式截圖：

未設(shè)置半透明時(shí)截圖

未設(shè)置半透明樣式 未實(shí)現(xiàn)半透明實(shí)例瀏覽器中效果截圖

三、對(duì)DIV設(shè)置CSS半透明樣式實(shí)例 - TOP

1、我們對(duì)“.div-b”選擇器加入半透明樣式代碼：

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;

設(shè)置60%半透明效果

完整實(shí)例網(wǎng)頁(yè)HTML代碼如下：

!DOCTYPE html

html

head

meta charset="utf-8" /

title半透明實(shí)例在線演示 ;/title

style

.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px}

.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00;

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6}

/* CSS注釋說(shuō)明：這里對(duì)CSS代碼換行是為了讓代碼在此我要中顯示完整，換行后CSS效果不受影響 */

/style

/head

body

div class="div-a"

div class="div-b"實(shí)現(xiàn)DIV半透明實(shí)例演示/div

/div

/body

/html

2、在瀏覽器效果截圖：

css div半透明實(shí)現(xiàn)截圖

css+div實(shí)現(xiàn)半透明 瀏覽器中瀏覽實(shí)現(xiàn)DIV半透明效果截圖

總結(jié)：根據(jù)以上兩個(gè)實(shí)例，第一個(gè)沒有設(shè)置半透明樣式，另外一個(gè)設(shè)置半透明樣式而實(shí)現(xiàn)了div層半透明效果，大家可以根據(jù)需要調(diào)整半透明值，實(shí)現(xiàn)想要半透明度。設(shè)置半透明效果要考慮IE瀏覽器、谷歌、火狐等瀏覽器兼容支持，所以我們半透明樣式代碼務(wù)必完整。

css中如何設(shè)置透明度

怎樣在CSS樣式中設(shè)置背景的透明度,下面一個(gè)具體的實(shí)例。把類為box的層設(shè)為透明。

div class="box"/div

style

.box{width:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3}

/style

其中background:#000; filter:alpha(opacity:30); opacity:0.3;為關(guān)鍵代碼，當(dāng)opacity值為1時(shí)，表示完全不透明，為0時(shí)表示完全透明。

其關(guān)的屬性介紹如下:

opacity: 0.3；這是“最重要的”，因?yàn)樗窃贑SS的現(xiàn)行標(biāo)準(zhǔn)。這將在Firefox，Safari和Opera的大多數(shù)版本的工作。這將是你所需要的一切如果所有的瀏覽器都支持目前的標(biāo)準(zhǔn)。當(dāng)然是他們不會(huì)錯(cuò)。

filter:alpha(opacity=30);這一個(gè)是針對(duì)IE瀏覽器

-moz-opacity:0.3;你需要這一個(gè)支持老版本的Mozilla瀏覽器如Netscape Navigator。

-khtml-opacity: 0.3;這是舊版本的Safari（1.×）當(dāng)渲染引擎是使用仍被稱為kthml，而不是目前的WebKit。

css里怎么給背景圖片變透明點(diǎn) 給圖片的div加什么代碼才能實(shí)現(xiàn)呢

1、新建html文檔，在body標(biāo)簽中添加一個(gè)img標(biāo)簽，這時(shí)默認(rèn)情況下圖片是不透明的：

2、在head標(biāo)簽中添加style標(biāo)簽，在style標(biāo)簽中為img標(biāo)簽設(shè)置透明度樣式，其中三個(gè)屬性是為了兼容不同瀏覽器：

3、刷新瀏覽器中的頁(yè)面，這時(shí)可以發(fā)現(xiàn)瀏覽器中圖片的透明度改變了，透明度的范圍是0-1，0表示完全透明，1表示不透明：

當(dāng)前標(biāo)題：css樣式透明,css透明效果
本文URL：http://chinadenli.net/article7/dsehcij.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站策劃、手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)