css背設(shè)置透明度設(shè)置教程

網(wǎng)站前端頁面開發(fā)時，常常需要設(shè)置css背景的透明度，以呈現(xiàn)較好的視覺效果，給用戶帶來良好的體驗，那么css是如何設(shè)置透明度的？本章給大家分享一下css設(shè)置透明度的幾種常用方法。希望對有需要的朋友有一定的幫助。

工具/原料

1
通過設(shè)置顏色透明度實現(xiàn)
css中rgba()可以用來設(shè)置頁面元素的顏色和透明度，rgba()顏色值是 RGB 顏色值的擴展，帶有一個 alpha 通道，通過它即可實現(xiàn)設(shè)置元素的不透明度。
2
rgba()具體使用方法：
background:rgba(255,0,0,0.5);
rgba（R,G,B,A)里的各值的取值范圍：

R：紅色值。正整數(shù) （0~255）
G：綠色值。正整數(shù) （0~255）
B：藍色值。正整數(shù)（0~255）
A：透明度。取值0~1之間
3
rgba()具體使用效果：
通過下面的代碼我們可以看到rgba()這個函數(shù)實現(xiàn)了div的背景透明，但對div內(nèi)部的文字不影響。
4
通過css中的opacity屬性設(shè)置背景透明度
在 CSS3 中，增加了一個 opacity 屬性，使用此屬性可以設(shè)置元素的透明度。opacity屬性具有繼承性，會使容器中的所有元素都具有透明度；
5
opacity屬性的使用方法

opacity: value ;

value ：指定不透明度，從0.0（完全透明）到1.0（完全不透明）。
在容器中可以直接使用此屬性。
6
opacity屬性具體使用效果：
可以看出文字也透明度也發(fā)生了變化，所以opacity不但會改變?nèi)萜鞯耐该鞫?，容器的子容器里的元素透明度也發(fā)生了改變。
END