前端如何設定背景顏色的透明度 css中的 rgba() 函式詳解 :background-color: rgba(255,255,255,0)
文章目錄
前言
今天寫畢設頁面需要用到背景虛化就用了這行程式碼
background-color: rgba(255,255,255,0);
效果如圖:
rgba() 函式 詳解
rgba() 函式使用紅®、綠(g)、藍(b)、透明度(a)的疊加來生成各式各樣的顏色。
rgba 即紅色、綠色、藍色、透明度(red, green, blue, alpha)
在對應的位置就代表對應的顏色以及透明度
紅色(r)0 到 255 間的整數,代表顏色中的紅色成分
綠色(g)0 到 255 間的整數,代表顏色中的綠色成分
藍色(b)0 到 255 間的整數,代表顏色中的藍色成分
透明度(a)取值 0~1 之間, 代表透明度
例如:
background-color:rgba(255,0,0,0.5); //紅色
background-color:rgba(0,255,0,0.5); //綠色
background-color:rgba(0,0,255,0.5); //藍色
background-color: rgba(255, 255, 255, 0); //則表示完全透明的白色
background-color: rgba(0, 0, 0, 1); //則表示完全不透明度的黑色
總結
提示:這裡對文章進行總結:
“Once you realize how beautiful you are, you will find it hard to keep the company of those who do not.”
相關文章
- RGBa顏色 css3的Alpha通道支援CSSS3
- CSS-背景顏色|background-colorCSS
- CSS設定元素的背景顏色CSS
- css 設定背景顏色CSS
- CSS RGBACSS
- CSS3顏色不透明度如何設定CSSS3
- CSS設定選中網頁文字時的背景和顏色CSS網頁
- 設定toast的字型顏色和背景顏色AST
- CSS 中的顏色、背景和剪下CSS
- opacity和rgba透明度深入解析
- 設定文字的選中狀態背景顏色
- CSS RGBA的用法程式碼例項CSS
- CSS3中RGBA和opacity的區別CSSS3
- CSS RGBA 程式碼例項CSS
- RGBA中的阿爾法通道
- css樣式背景顏色漸變效果CSS
- IOS設定狀態列的背景顏色iOS
- js設定頁面TR 的屬性 背景顏色 樣式JS
- markdown字型顏色和背景設定
- svg 圖示設定背景顏色SVG
- CSS樣式中顏色與顏色值的應用CSS
- win10系統如何設定Word背景顏色_win10 word頁面背景顏色設定步驟Win10
- 如何設定小程式頁面各個部分的背景顏色?
- 強大的CSS:顏色、背景和剪下CSS
- UITabBarController、TabBar背景顏色設定、TabBarItem顏色處理UItabBarController
- iOS button背景顏色狀態設定iOS
- CSS設定選中文字的顏色CSS
- sass的顏色函式函式
- win10 如何設定txt背景綠色 win10如何在txt文件修改背景顏色Win10
- 如何決定介面設計中顏色
- CSS 設定字型顏色和大小CSS
- 動態改變Drawable中我們自定義背景的顏色並設定顏色以16進位制進行設定
- css3背景顏色漸變CSSS3
- CSS設定滑鼠選中文字的顏色CSS
- 神奇的 CSS,讓文字智慧適配背景顏色CSS
- ProgressBar 顏色的設定
- Android中使按鈕的背景變得透明&前端中css設定透明背景Android前端CSS
- JavaScript點選設定背景顏色的選項卡程式碼JavaScript