css如何設(shè)置透明度(兼容ie,firefox)

css設(shè)置透明度，首先需要知道的是在瀏覽器中的不同使用，一般在ie中用的是filter:alpha(opacity=0);這個屬性來設(shè)置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現(xiàn)兼容，具體看代碼：

成都創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營銷，提供成都網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營銷、重慶小程序開發(fā)、公眾號商城、等建站開發(fā)，成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢。

html

head

#div1{

width:200px;

height:600px;

margin:0 auto;

opacity:0;

filter:alpha(opacity=0); //0 代表的是隱藏，就是透明度最低。

}

/head

body

div id='div1'

p測試文字。/p

/div

/body

/html

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

怎樣在CSS樣式中設(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時，表示完全不透明，為0時表示完全透明。

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

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

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

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

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

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

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

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

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

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

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

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

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

!DOCTYPE html

html

head

meta charset="utf-8" /

title半透明實例在線演示 ;/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半透明實例演示/div

/div

/body

/html

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

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

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

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

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

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

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

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

!DOCTYPE html

html

head

meta charset="utf-8" /

title半透明實例在線演示 ;/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注釋說明：這里對CSS代碼換行是為了讓代碼在此我要中顯示完整，換行后CSS效果不受影響 */

/style

/head

body

div class="div-a"

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

/div

/body

/html

2、在瀏覽器效果截圖：

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

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

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

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

您好，

如果你想設(shè)置背景顏色得透明度，可以用background:rgba(r,g,b,a)其中a為透明度，從0-1

如果你想設(shè)置整體透明度，可以使用css屬性opacity:0到1;

css透明度 css圖片透明度設(shè)置方法

在一些網(wǎng)站的登錄頁面上，經(jīng)常可以發(fā)現(xiàn)，一張圖片疊加在另一張圖片上，底層的圖片若隱若現(xiàn)，利用css中的透明屬性opacity可以實現(xiàn)這種效果，下面就簡單介紹一下怎么寫代碼

新建一個HTML文件，下載兩張圖片，如下圖，放在一個文件夾中，避免出現(xiàn)路徑問題

代碼示例如下，主要利用css偽元素::before，F(xiàn)_box為前置層，浮于背景上方

下面簡單分解下代碼，分為1，2，3，第一部分，設(shè)置背景圖片001.jpg；第三部分，固定前置層圖片002.jpg的位置；第二部分，利用偽元素：：before，設(shè)置屬性opacity來調(diào)節(jié)透明度，取值為0-1，0是全透明，即看不見的效果，1是全不透明

代碼示例中，設(shè)置opacity為0.5，半透明狀態(tài)，實際頁面效果如下

css設(shè)置透明度的屬性

style="background:rgba(51,51,51,0.1);"

前三51為顏色的rbg代碼，后面0.1背景顏色的透明度，1為不透明，0.1代表10%透明度