在網頁版面中有時為了網頁的整體美觀,可能需要將網頁中的某些部分設定為背景顏色透明,那麼如何設定背景顏色透明呢?這篇文章就來跟大家介紹一下css設定背景顏色透明的方法。
在css中設置背景顏色透明的方法有兩種:一種是透過rgba方式設置,另一種是透過backgroud和opacity設定。
下面我們就來分別看看css中這兩種方法實現背景顏色透明的具體實例
1、透過backgroud和opacity設定背景顏色透明
background屬性中屬性值比較簡單,這裡就不細說了,大家可以參考css學習手冊來了解一下,我們在這裡來簡單看看opacity屬性
opacity屬性參數的"不透明度"是以數字表示,從0.0 至1.0 都可以,完全透明是0.0,完全不透明是 1.0,換句話說,數字越大代表元素越不透明。參數除了可以使用"不透明度"之外,還有 inherit 繼承父層屬性,不過瀏覽器支援度較差,不建議使用。
看完了兩個屬性的介紹,下面我們就來看透過backgroud和opacity設定背景顏色透明度的具體實例
程式碼如下:
<div class="box"></div>
.box{ width:300px; height:200px; margin:0 auto; border:1px solid #ccc; background:red; opacity:0.2; }
背景顏色透明效果如下:
說明:透過backgroud和opacity設定背景顏色透明度,如果背景上面有文字的話,那麼文字也會變成透明,就像下面的效果
所以要看情況來使用這個方法來設定背景顏色透明。
相關文章推薦:
1. 網頁設計中css怎麼實作背景透明?(範例)
2.css實作背景顏色半透明的兩種方法
3.css如何設定透明度?設定透明度的兩種方法(程式碼實例)
相關影片教學:
1.CSS影片教學-玉女心經版
#2、透過rgba方式設定背景顏色透明
所謂RGBA顏色,就是RGB三原色加ALPHA。在為背景添加顏色的同時,提供透明度特性。
用法:background:rgba(R,G, B, A);
下面我們就來看透過rgba方式設定背景顏色透明度的具體實例:
<div class="title_div">背景颜色透明</div>
.title_div{ width: 200px; height: 200px; line-height: 30px; text-align: center; margin:0 auto; background-color:rgba(220,38,38,0.2); }
# rgba方式設定背景顏色透明度效果如下:
說明:透過rgba方式設定背景顏色透明度,可以設定背景顏色透明而文字不透明,但這種方法的相容性不好,不相容ie瀏覽器
這篇文章到這裡就全部結束了,關於css中更多的知識大家可以參考php中文網css影片教學、 css3影片教學、css學習手冊和css3學習手冊進一步的學習。
以上是css如何設定背景顏色透明? css設定背景顏色透明度的兩種方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!