前端如何設定背景顏色的透明度 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 RGBACSS
- CSS3顏色不透明度如何設定CSSS3
- CSS設定選中網頁文字時的背景和顏色CSS網頁
- 設定toast的字型顏色和背景顏色AST
- CSS3中RGBA和opacity的區別CSSS3
- CSS 中的顏色、背景和剪下CSS
- RGBA中的阿爾法通道
- js設定頁面TR 的屬性 背景顏色 樣式JS
- CSS樣式中顏色與顏色值的應用CSS
- svg 圖示設定背景顏色SVG
- markdown字型顏色和背景設定
- 如何設定小程式頁面各個部分的背景顏色?
- win10系統如何設定Word背景顏色_win10 word頁面背景顏色設定步驟Win10
- 強大的CSS:顏色、背景和剪下CSS
- sass的顏色函式函式
- CSS 設定字型顏色和大小CSS
- win10 如何設定txt背景綠色 win10如何在txt文件修改背景顏色Win10
- CSS設定滑鼠選中文字的顏色CSS
- Android中使按鈕的背景變得透明&前端中css設定透明背景Android前端CSS
- 如何決定介面設計中顏色
- CAD如何設定顏色
- css3背景顏色漸變CSSS3
- 神奇的 CSS,讓文字智慧適配背景顏色CSS
- CSS 設定文字框游標顏色CSS
- JavaScript點選設定背景顏色的選項卡程式碼JavaScript
- 如果給一個元素設定background-color,它的顏色會填充哪些區域呢?
- 純 CSS 解決自定義 CheckBox 背景顏色問題CSS
- bootstrap datepicker 單獨設定某些日期的特殊背景顏色和某些月份特殊背景boot
- qt 設定QTextEdit文字框中指定內容塊的背景顏色QT
- 我的SCRT顏色設定
- CSS設定一個文字兩種顏色CSS
- CSS 透明度設定CSS
- 探索前端黑科技——通過 png 圖的 rgba 值快取資料前端快取
- 使用 JavaScript 控制 CSS 中的顏色JavaScriptCSS
- RRGGBBAA或者RRGGBB轉換成rgba()