1. 首頁 > 生活百科 > >

css透明度

生活百科半透明


css透明度

文章插圖
css中如何設置透明度：
css透明度

文章插圖
1、創建一個html文件 。
2、在html文件找到一個<body>標簽，在這個標簽里創建一個<div>標簽并添加一個類，在這把這個類設置為：rgba 。
代碼：<div class="rgba"></div>
3、為div添加樣式 。在<title>標簽后面創建一個<style>，在<style>標簽里設置rgba類的高和背景透明度的樣式 。透明度參數，取值在0~1之間，不可為負值，透明度參數越小透明度越高 。
代碼：
<style type="text/css">
.rgba{
background-color: rgba(0,0,0,0.5);
height: 200px;
}
</style>
4、保存后使用瀏覽器查看 ?？梢钥吹疆斖该鞫葹橛?.1修改為1時div背景由灰色變為了黑色 。
5、所有代碼 ?？梢园阉写a復制到新建的html文件上，保存好后使用瀏覽器打開借口看到效果 。
所有代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css設置背景透明</title>
<style type="text/css">
.rgba{
background-color: rgba(0,0,0,0.5);
height: 200px;
}
</style>
【css透明度】</head>
<body>
<div class="rgba"></div>
</body>
</html>
css中如何設置透明度？：
css透明度

文章插圖
怎樣在CSS樣式中設置背景的透明度,下面一個具體的實例 。把類為box的層設為透明 。
<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;為關鍵代碼，當opacity值為1時，表示完全不透明，為0時表示完全透明 。
其關的屬性介紹如下:
opacity: 0.3；這是“最重要的”，因為它是在CSS的現行標準 。這將在Firefox，Safari和Opera的大多數版本的工作 。這將是你所需要的一切如果所有的瀏覽器都支持目前的標準 。當然是他們不會錯 。
filter:alpha(opacity=30);這一個是針對IE瀏覽器
-moz-opacity:0.3;你需要這一個支持老版本的Mozilla瀏覽器如Netscape Navigator 。
-khtml-opacity: 0.3;這是舊版本的Safari當渲染引擎是使用仍被稱為kthml，而不是目前的WebKit 。
css怎么設置透明度：
css透明度

文章插圖
1、filter：對win IE設置半透明濾鏡效果，filter:alpha(Opacity=80)代表該對象80%半透明，火狐瀏覽器不認
2、-moz-opacity：對mozilla firefox火狐瀏覽器實現半透明，win IE不認此屬性，-moz-opacity:0.5相當于設置半透明為50%
3、opacity：對除IE外所有瀏覽器支持包括谷歌，放最后主要針對谷歌瀏覽器，opacity: 0.5;表示設置50%半透明
為了觀察到對DIV半透明實現，我們設置兩個DIV層，分別一個放于另外一個DIV層內，外層DIV命名為“.div-a”;上面被包含的層CSS類命名為“.div-b”，形成“.div-b”盒子放于“.div-a”內
我們對底層DIV設置一個背景是一張圖片，上面的DIV盒子設置村黑色 。
二、未設置半透明樣式實例-TOP
1、根據描述實例，未設置半透明HTML源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半透明實例在線演示 www.divcss5.com</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、未設置半透明CSS樣式截圖：
未設置半透明時截圖
未設置半透明樣式 未實現半透明實例瀏覽器中效果截圖
三、對DIV設置CSS半透明樣式實例-TOP
1、我們對“.div-b”選擇器加入半透明樣式代碼：
filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;
設置60%半透明效果
完整實例網頁HTML代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

推薦閱讀