溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS怎么設置透明度

發布時間:2021-03-05 14:01:32 來源:億速云 閱讀:206 作者:小新 欄目:開發技術

這篇文章主要介紹CSS怎么設置透明度,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

  在前端頁面開發布局的時候,為了給用戶呈現不同的效果,經常需要設置透明度,那么css是怎樣設置透明度的?

  一、cssrgba()設置顏色透明度

  語法:

  rgba(R,G,B,A);

  RGBA是代表Red(紅色)Green(綠色)Blue(藍色)和Alpha(不透明度)三個單詞的縮寫。RGBA顏色值是RGB顏色值的擴展,帶有一個alpha通道-它規定了對象的不透明度。

  rgba()里的值的介紹:

  R:紅色值。正整數(0~255)

  G:綠色值。正整數(0~255)

  B:藍色值。正整數(0~255)

  A:透明度。取值0~1之間

  rgba()只是單純的可以設置顏色透明度,這樣在頁面的布局中有很多應用。比如說:讓背景出現透明效果,但上面的文字不透明。

  二、cssopacity屬性設置背景透明度

  語法:

  opacity:value;

  value:指定不透明度,從0.0(完全透明)到1.0(完全不透明)。

  opacity屬性具有繼承性,會使容器中的所有元素都具有透明度;

  代碼實例:

<!DOCTYPEhtml>
  <html>
  <head>
  <metacharset="UTF-8">
  <title>opacity屬性</title>
  <style>
  .demo{
  width:280px;
  height:140px;
  margin:50pxauto;
  }
  .demo1,.demo2{
  width:120px;
  height:120px;
  margin:10px;
  float:left;
  background:#2DC4CB;

  總之,rgba()方法與opacity方法雖然都可以實現透明度效果,但rgba()只作用于元素的顏色或其背景色(設置了rgb()透明度元素的子元素不會繼承其透明效果);而opacity具有繼承性,既作用于元素本身,也會使元素內的所有子元素具有透明度。

以上是“CSS怎么設置透明度”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女