本篇內容介紹了“html能不能設置透明色背景”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
html中設置透明色背景的方法：1、直接使用“backgroud:rgba(R,G, B, A)”設置透明色背景。2、先使用“backgroud:顏色值;”樣式來設置背景色；然后使用“opacity:透明度值”來給背景色添加一個透明度即可。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
html設置透明色背景
在html中設置背景顏色透明的方法有兩種：一種是通過rgba方式設置，另一種是通過backgroud和opacity設置。
1、rgba方式
所謂RGBA顏色，就是RGB三原色加ALPHA。在給背景添加顏色的同時，提供透明度特性。
用法：
background:rgba(R,G, B, A);
紅色（R）：代表顏色中的紅色成分，0 到 255 間的整數（也可以使用百分比 0% ~ 100%）。
綠色（G）：代表顏色中的綠色成分，0 到 255 間的整數（也可以使用百分比 0% ~ 100%）。
藍色（B）：代表顏色中的藍色成分，0 到 255 間的整數（也可以使用百分比 0% ~ 100%）。
透明度（A）：代表透明度，取值 0（完全透明）~1（完全不透明） 之間。
下面我們就來看通過rgba方式設置背景顏色透明度的具體實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
height: 200px;
line-height: 30px;
text-align: center;
margin: 0 auto;
}
.div1{
background: rgba(220, 38, 38, 1);
}
.div2 {
background: rgba(220, 38, 38, 0.2);
}
</style>
</head>
<body>
<div class="div1">背景顏色，沒有設置透明度</div><br />
<div class="div2">背景顏色，設置了透明度</div>
</body>
</html>效果圖：
【 】
1、通過backgroud和opacity設置背景顏色透明
background屬性中屬性值比較簡單，這里就不細說了，大家可以參考css在線手冊來了解一下，我們在這里來簡單看看opacity屬性
opacity屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，換句話說，數字越大代表元素越不透明。
參數除了可以使用＂不透明度＂之外，還有 inherit 繼承父層屬性，不過瀏覽器支援度較差，不建議使用。
看完了對于兩種屬性的介紹，下面我們就來看通過backgroud和opacity設置背景顏色透明度的具體實例
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 200px;
line-height: 30px;
text-align: center;
margin: 0 auto;
border: 1px solid #ccc;
}
.div1 {
background: red;
}
.div2 {
background: red;
opacity: 0.2;
}
</style>
</head>
<body>
<div class="div1">背景顏色，沒有設置透明度</div><br />
<div class="div2">背景顏色，設置了透明度</div>
</body>
</html>效果圖：
“html能不能設置透明色背景”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
