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