1、通過backgroud和opacity設置背景顏色透明

opacity屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，換句話說，數字越大代表元素越不透明。參數除了可以使用＂不透明度＂之外，還有 inherit 繼承父層屬性，不過瀏覽器支援度較差，不建議使用。

代碼如下：

.box{width:300px;height:200px;margin:0 auto;border:1px solid #ccc;background:red;opacity:0.2;}

說明：通過backgroud和opacity設置背景顏色透明度，如果背景上面有文字的話，那么文字也會變成透明，就像下面的效果

2、通過rgba方式設置背景顏色透明

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

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

下面我們就來看通過rgba方式設置背景顏色透明度的具體實例：

.title_div{width: 200px;height: 200px;line-height: 30px;text-align: center;margin:0 auto;background-color:rgba(220,38,38,0.2);}

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

總結

以上是生活随笔為你收集整理的CSS设置背景透明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。