在網(wǎng)頁(yè)布局中有時(shí)為了網(wǎng)頁(yè)的整體美觀，可能需要將網(wǎng)頁(yè)中的某些部分設(shè)置為背景顏色透明，那么如何設(shè)置背景顏色透明呢？本篇文章就來(lái)給大家介紹一下css設(shè)置背景顏色透明的方法。

在css中設(shè)置背景顏色透明的方法有兩種：一種是通過(guò)rgba方式設(shè)置，另一種是通過(guò)backgroud和opacity設(shè)置。

下面我們就來(lái)分別看看css中這兩種方法實(shí)現(xiàn)背景顏色透明的具體實(shí)例

1、通過(guò)backgroud和opacity設(shè)置背景顏色透明

background屬性中屬性值比較簡(jiǎn)單，這里就不細(xì)說(shuō)了，大家可以參考css學(xué)習(xí)手冊(cè)來(lái)了解一下，我們?cè)谶@里來(lái)簡(jiǎn)單看看opacity屬性

opacity屬性參數(shù)的＂不透明度＂是以數(shù)字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是

1.0，換句話(huà)說(shuō)，數(shù)字越大代表元素越不透明。參數(shù)除了可以使用＂不透明度＂之外，還有 inherit

繼承父層屬性，不過(guò)瀏覽器支援度較差，不建議使用。

看完了對(duì)于兩種屬性的介紹，下面我們就來(lái)看通過(guò)backgroud和opacity設(shè)置背景顏色透明度的具體實(shí)例

代碼如下：

width:300px;

height:200px;

margin:0 auto;

border:1px solid #ccc;

background:red;

opacity:0.2;

}

背景顏色透明效果如下：

說(shuō)明：通過(guò)backgroud和opacity設(shè)置背景顏色透明度，如果背景上面有文字的話(huà)，那么文字也會(huì)變成透明，就像下面的效果

所以要看情況來(lái)使用這種方法來(lái)設(shè)置背景顏色透明。相關(guān)文章推薦：

1. 網(wǎng)頁(yè)設(shè)計(jì)中css怎么實(shí)現(xiàn)背景透明?(示例)

2.css實(shí)現(xiàn)背景顏色半透明的兩種方法

3.css如何設(shè)置透明度？設(shè)置透明度的兩種方法(代碼實(shí)例) 相關(guān)視頻教程：

1.CSS視頻教程-玉女心經(jīng)版

2、通過(guò)rgba方式設(shè)置背景顏色透明

所謂RGBA顏色，就是RGB三原色加ALPHA。在給背景添加顏色的同時(shí)，提供透明度特性。

用法：background:rgba(R,G, B, A);

下面我們就來(lái)看通過(guò)rgba方式設(shè)置背景顏色透明度的具體實(shí)例：

背景顏色透明.title_div{

width: 200px;

height: 200px;

line-height: 30px;

text-align: center;

margin:0 auto;

background-color:rgba(220,38,38,0.2);

}

rgba方式設(shè)置背景顏色透明度效果如下：

說(shuō)明：通過(guò)rgba方式設(shè)置背景顏色透明度，可以設(shè)置背景顏色透明而文字不透明，但是這種方法的兼容性不好，不兼容ie瀏覽器

本篇文章到這里就全部結(jié)束了，關(guān)于css中更多的知識(shí)大家可以參考Gxlcmscss視頻教程、css3視頻教程、css學(xué)習(xí)手冊(cè)和css3學(xué)習(xí)手冊(cè)進(jìn)一步的學(xué)習(xí)。

總結(jié)

以上是生活随笔為你收集整理的css导航栏背景色透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。