整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頭條創(chuàng)作挑戰(zhàn)賽#
【今日HTML小知識(shí)-2：設(shè)置顏色透明】在網(wǎng)頁布局中有時(shí)為了網(wǎng)頁的整體美觀，可能需要將網(wǎng)頁中的某些部分設(shè)置為背景顏色透明，那么如何設(shè)置背景顏色透明呢？本篇文章就來給大家介紹一下設(shè)置背景顏色透明的兩種方法。
background屬性中屬性值比較簡單，這里就不細(xì)說了，opacity屬性參數(shù)的＂不透明度＂是以數(shù)字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是1.0，換句話說，數(shù)字越大代表元素越不透明。代碼示例如下：
代碼
示例效果
注意：通過backgroud和opacity設(shè)置背景顏色透明度，如果背景上面有文字的話，那么文字也會(huì)變成透明，就像上面的效果一樣。
所謂RGBA顏色，就是RGB三原色加ALPHA。在給背景添加顏色的同時(shí)，提供透明度特性。
用法：background:rgba(R, G, B, A) ；
代碼實(shí)例如下：
代碼
示例效果
注意：通過rgba方式設(shè)置背景顏色透明度，可以設(shè)置背景顏色透明而文字不透明。
以上為HTML設(shè)置背景透明色的兩種方法，希望能幫助到正在學(xué)習(xí)HTML的你們噢~~~
新人作者，如有不足地方，希望大家多多交流，隨時(shí)補(bǔ)充噢~~~
學(xué)生就可以看懂的css基礎(chǔ)實(shí)戰(zhàn)系列，pre標(biāo)簽里是筆記總結(jié)，動(dòng)手實(shí)際操作一下會(huì)加強(qiáng)理解。有疑問留言交流哦。
可能比較枯燥，但是再堅(jiān)持一下，前端知識(shí)的大門就會(huì)大開了。
說下css透明的方式，今天不做ie的濾鏡處理（歡迎小伙伴們?cè)u(píng)論去補(bǔ)充兼容）
主要是看RGBA和Opacity
先來簡單看看RGBA：
語法
rgba(r,g,b,a)
取值說明
R：紅色值。正整數(shù) | 百分?jǐn)?shù)
G：綠色值。正整數(shù) | 百分?jǐn)?shù)
B：藍(lán)色值。正整數(shù) | 百分?jǐn)?shù)
A：Alpha透明度。取值0~1之間。
正整數(shù)為十進(jìn)制0~255之間的任意值，百分?jǐn)?shù)為0%~100%之間的任意值。
RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度，即，如果一個(gè)元素的alpha通道數(shù)值為0%（或0），那該元素就是完全透明的（也就是看不見的，但是可以透過該元素看到該元素下的元素），數(shù)值為100%（或255）時(shí)則意味著該元素完全不透明。
再來看看Opacity：
語法
opacity: value|inherit;
取值說明
value:不透明度，從 0.0 （完全透明）到 1.0（完全不透明）。
區(qū)別
opacity會(huì)繼承父元素的 opacity 屬性，而RGBA設(shè)置的元素的后代元素不會(huì)繼承不透明屬性。
.rgba{
background: rgba(255,0,0,0.5);
}
.opacity{
background: red;
opacity: 0.5;
}
從圖上可以看到，給div設(shè)置Opacity屬性的里面的文本也是半透明的，而給div設(shè)置RGBA屬性的里面的文本并沒有繼承透明性。
注：該實(shí)例RGBA和Opacity的不透明度取值均為0.5.
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
