Warning: mkdir(): No space left on device in /www/wwwroot/test001/func.php on line 253

Warning: file_put_contents(./cachefile_yuan/hillsideartistshouse.com/cache/cf/7d766/14f3b.html): failed to open stream: No such file or directory in /www/wwwroot/test001/func.php on line 241
關於CSS透明度的兩種使用方法以及優缺點_網站建設_網站製作_做網站的公司_999元全包_漢獅網絡




百姓彩票

先設計 後付費,服務更有保障

2024我們與您攜手共贏,為您的企業形象保駕護航!

關於CSS透明度的兩種使用方法以及優缺點

在的過程中,為了提升用戶視覺體驗度,可能要將網頁中的某些部分設置為背景顏色透明,使用css設置背景顏色透明的有兩種方法:一種是通過rgba方式設置,另一種是通過backgroud和opacity設置。

第一種方法:通過backgroud和opacity設置背景透明
在時opacity屬性參數的"不透明度"是以數字表示,從 0.0 至 1.0 都可以,完全透明是 0.0,完全不透明是 1.0,就是說:數字越大代表元素越不透明。參數除了可以使用"不透明度"之外,還有 inherit 繼承父層屬性,不過瀏覽器支援度較差,不建議使用。
注意事項:一定要考慮不同瀏覽器的兼容性寫法,正確應該這樣寫:

.transparent{  
      filter:alpha(opacity=50);  
      -moz-opacity:0.5;  
      -khtml-opacity: 0.5;  
      opacity: 0.5;  
}

.transparent代表的是透明度是50%。
opacity背景顏色透明度的弊端:應用此方法會使整個box的透明度都變成了50%,包括背景和背景上麵的圖片或文字。有時我們隻是想讓背景透明而上麵的文字正常顯示,此時就不合適了,需要考慮使用第二種方法。

第二種方法:利用rgba的方式來設置背景透明度
中所謂RGBA顏色,就是RGB三原色加ALPHA。在給背景添加顏色的同時,提供透明度特性。
用法:background:rgba(R,G, B, A); A代表透明度從0.0到1。
示例:

<div style="background-color:rgba(151,25,31,0.5);">背景紅色透明度50%,而上麵的文字正常顯示</div>

說明:通過rgba方式設置背景顏色透明度,可以設置背景顏色透明而文字不透明


我漢獅網絡提供網站建設、APP軟件開發、軟件開發、小程序開發、網站網絡營銷等一站式服務,歡迎企業谘詢
免費谘詢:18838171308

先設計 後付費,服務更有保障

2024我們與您攜手共贏,為您的企業形象保駕護航!

在線客服
聯係方式

24h谘詢電話

18838171308

微信二維碼
微信