整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頭條創作挑戰賽#
【今日HTML小知識-2：設置顏色透明】在網頁布局中有時為了網頁的整體美觀，可能需要將網頁中的某些部分設置為背景顏色透明，那么如何設置背景顏色透明呢？本篇文章就來給大家介紹一下設置背景顏色透明的兩種方法。
background屬性中屬性值比較簡單，這里就不細說了，opacity屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是1.0，換句話說，數字越大代表元素越不透明。代碼示例如下：
代碼
示例效果
注意：通過backgroud和opacity設置背景顏色透明度，如果背景上面有文字的話，那么文字也會變成透明，就像上面的效果一樣。
所謂RGBA顏色，就是RGB三原色加ALPHA。在給背景添加顏色的同時，提供透明度特性。
用法：background:rgba(R, G, B, A) ；
代碼實例如下：
代碼
示例效果
注意：通過rgba方式設置背景顏色透明度，可以設置背景顏色透明而文字不透明。
以上為HTML設置背景透明色的兩種方法，希望能幫助到正在學習HTML的你們噢~~~
新人作者，如有不足地方，希望大家多多交流，隨時補充噢~~~
學生就可以看懂的css基礎實戰系列，pre標簽里是筆記總結，動手實際操作一下會加強理解。有疑問留言交流哦。
可能比較枯燥，但是再堅持一下，前端知識的大門就會大開了。
為Web開發人員，最常見的事情之一就是更改HTML元素的背景顏色。但是，如果您不了解如何使用CSS background-color屬性，可能會產生混淆。在本文中，我們討論以下幾點
1.HTML元素的默認背景色值
2.如何更改div的背景顏色，這是非常常見的元素
3.該background-color屬性會影響CSS盒子模型的哪些部分，以及
4.此屬性可以采用的不同值。
div的默認背景顏色是transparent。因此，如果您不指定div的背景色，它將顯示其父元素的背景色。
在此示例中，我們將更改以下div的背景顏色。
<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>沒有任何樣式，它將在視覺上轉換為以下內容。
讓我們通過向類中添加樣式來更改div的背景顏色。您可以通過嘗試HTML文件中的示例進行操作。
<style>
.div-1 {
background-color: #EBEBEB;
}
.div-2 {
background-color: #ABBAEA;
}
.div-3 {
background-color: #FBD603;
}
</style>
<body>
<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>
</body>這將導致以下結果：
看！我們已成功更改了該div的背景顏色。接下來，讓我們更多地了解此屬性。讓我們看看background-color屬性如何影響CSS-box模型的各個部分。
根據CSS框模型，所有HTML元素都可以建模為矩形框。每個盒子由4個部分組成，如下圖所示。
如果您不熟悉Box模型，則可以查閱相關資料。問題是，當您更改div的背景顏色時，Box模型的哪一部分會受到影響？簡單的答案是填充區域和內容區域。讓我們通過一個例子來確認這一點。
<style>
body {
background-color: #ABBAEA;
}
div {
height: 200px;
margin: 20px;
border: 5px solid;
background-color: #FBD603;
}
</style>
<body>
<div>
<p>This is the parent div which contains the div we are testing</p>
<div>
<p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
</div>
</div>
</body>這將導致：
從上面的示例中，我們可以看到空白區域和邊框區域不受背景顏色變化的影響。我們可以使用border-color屬性更改邊框的顏色。邊距區域保持透明，并反映父容器的背景色。
最后，讓我們討論background-color屬性可以采用的值。
就像color屬性一樣，background-color屬性可以采用六個不同的值。讓我們通過一個示例考慮三個最常見的值。在示例中，我們將div的背景色設置為具有不同值的紅色。
<style>
/* Keyword value/name of color */
.div-1 {
background-color: red;
}
/* Hexadecimal value */
.div-2 {
background-color: #FF0000;
}
/* RGB value */
.div-3 {
background-color: rgb(255,0,0);
}
</style>
<body>
<div class="div-1">
<p>The background property can take six different values.</p>
</div>
<div class="div-2">
<p>The background property can take six different values.</p>
</div>
<div class="div-3">
<p>The background property can take six different values.</p>
</div>
</body>注意，它們的結果都是相同的背景色。
該background-color屬性可以采用的其他值包括HSL值，特殊關鍵字值和全局值。這是每個例子。
/* HSL value */
background-color: hsl(0, 100%, 25%;
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;設置元素的背景色時，重要的是要確保背景色和其包含的文本顏色的對比度足夠高。這是為了確保弱視人士可以輕松閱讀文本。
第一個div的背景顏色與文本顏色之間的對比度不夠高，每個人都看不到。因此，除非您是唯一正在使用的網站，并且您的視力非常好，否則應避免這種顏色組合。
第二個div在背景顏色和文本顏色之間具有更好的對比度。因此，它使人們更容易閱讀和閱讀。
在本文中，我們看到了如何更改div的背景顏色。我們還討論了CSS Box模型的哪些部分受背景顏色變化的影響。最后，我們討論了background-color屬性可以采用的值。
希望本文對您有所幫助。謝謝閱讀。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
