為Web開發(fā)人員,最常見的事情之一就是更改HTML元素的背景顏色。但是,如果您不了解如何使用CSS background-color屬性,可能會產(chǎn)生混淆。在本文中,我們討論以下幾點
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>
沒有任何樣式,它將在視覺上轉(zhuǎn)換為以下內(nèi)容。
讓我們通過向類中添加樣式來更改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>
這將導致以下結(jié)果:
看!我們已成功更改了該div的背景顏色。接下來,讓我們更多地了解此屬性。讓我們看看background-color屬性如何影響CSS-box模型的各個部分。
根據(jù)CSS框模型,所有HTML元素都可以建模為矩形框。每個盒子由4個部分組成,如下圖所示。
如果您不熟悉Box模型,則可以查閱相關(guān)資料。問題是,當您更改div的背景顏色時,Box模型的哪一部分會受到影響?簡單的答案是填充區(qū)域和內(nèi)容區(qū)域。讓我們通過一個例子來確認這一點。
<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>
這將導致:
從上面的示例中,我們可以看到空白區(qū)域和邊框區(qū)域不受背景顏色變化的影響。我們可以使用border-color屬性更改邊框的顏色。邊距區(qū)域保持透明,并反映父容器的背景色。
最后,讓我們討論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>
注意,它們的結(jié)果都是相同的背景色。
該background-color屬性可以采用的其他值包括HSL值,特殊關(guān)鍵字值和全局值。這是每個例子。
/* 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的背景顏色與文本顏色之間的對比度不夠高,每個人都看不到。因此,除非您是唯一正在使用的網(wǎng)站,并且您的視力非常好,否則應避免這種顏色組合。
第二個div在背景顏色和文本顏色之間具有更好的對比度。因此,它使人們更容易閱讀和閱讀。
在本文中,我們看到了如何更改div的背景顏色。我們還討論了CSS Box模型的哪些部分受背景顏色變化的影響。最后,我們討論了background-color屬性可以采用的值。
希望本文對您有所幫助。謝謝閱讀。
內(nèi)容首發(fā)于工粽號:程序員大澈,每日分享一段優(yōu)質(zhì)代碼片段,歡迎關(guān)注和投稿!
大家好,我是大澈!
本文約 1400+ 字,整篇閱讀約需 2 分鐘。
今天分享一段優(yōu)質(zhì) CSS 代碼片段,讓文本和背景色混合產(chǎn)生一種獨特的效果,就像下圖這種。
老規(guī)矩,先閱讀代碼片段并思考,再看代碼解析再思考,最后評論區(qū)留下你的見解!
<div class="banner">
<h1 class="title">每日分享一段優(yōu)質(zhì)代碼片段,歡迎關(guān)注與投稿!</h1>
</div>
.banner {
height: 230px;
background-image: url(./img/banner.png);
background-repeat: no-repeat;
background-size: 100% 230px;
line-height: 230px;
text-align: center;
}
.title {
margin: 0;
color: #fff;
font-size: 50px;
/* 關(guān)鍵點 */
mix-blend-mode: difference;
}
分享原因
這段代碼展示了如何使用 CSS 和 HTML 創(chuàng)建一個帶有背景圖片和標題文本的橫幅(banner),并且通過 mix-blend-mode: difference; 為標題文本添加混合模式效果。
mix-blend-mode 屬性可以為元素設置混合模式,使其顏色與背景顏色混合,從而創(chuàng)建有趣的視覺效果。
這個效果在設計中很常見,能增加頁面的視覺吸引力,強調(diào)和突出文本內(nèi)容。
代碼解析
1. banner 類
設置背景元素基礎樣式。
定義背景圖片,以及讓文本垂直水平居中對齊。
2. mix-blend-mode: difference;
這是一個關(guān)鍵設置。
使用了 mix-blend-mode: difference; ,這意味著標題文字的顏色將與其父元素(.banner)的背景顏色進行差值計算,產(chǎn)生類似于反相的效果。
在這種情況下,由于父元素(.banner)的背景是白色,而文字原本的顏色是白色,通過差值計算后,文字顏色就變成了黑色,從而讓白色文字在白色背景上也能夠顯示。
3. mix-blend-mode 屬性詳解
mix-blend-mode CSS 屬性描述了元素的內(nèi)容應該與其直系父元素的內(nèi)容和元素的背景如何混合。
它允許創(chuàng)建各種視覺效果,例如半透明效果、陰影、圖片蒙版等。
以下是兼容性:
以下是一些常見的屬性值:
normal:這是默認值,使用正常的顏色混合模式,不產(chǎn)生特殊混合效果。
multiply:將兩個顏色的值相乘,會得到一個更暗的顏色,常用于創(chuàng)建陰影效果。
screen:將兩個顏色的值相加,然后減去相乘的值,會得到一個更亮的顏色,可用于創(chuàng)建高光效果。
overlay:根據(jù)背景顏色的亮度來選擇顏色混合模式。如果背景顏色較暗,則使用 multiply 模式;如果背景顏色較亮,則使用 screen 模式。
darken:將兩個顏色的值進行比較,使用較暗的那個顏色。
lighten:與 darken 相反,使用較亮的那個顏色。
color-dodge:將前景色分解為 RGB 分量,并將每個分量分別除以(1 減去背景色的對應分量),然后將每個分量限制在 0 到 1 之間,并使用限制后的前景色作為混合色。這種模式會使顏色變亮。
color-burn:將前景色分解為 RGB 分量,并將每個分量分別除以背景色的對應分量,然后將每個分量限制在 0 到 1 之間,并使用限制后的前景色作為混合色。它會使顏色變暗。
difference:將前景色減去背景色的值,并取絕對值,會導致一種反相的效果。
exclusion:將前景色和背景色的值相加,然后減去相乘的值的兩倍,常用于創(chuàng)建反相效果,但其對比度比 difference 更低,顏色更柔和。
hue:將前景色的色相(hue)與背景色的飽和度(saturation)和亮度(lightness)混合,可在不改變亮度和飽和度的情況下改變顏色。
saturation:將前景色的飽和度與背景色的色相和亮度混合,用于在不改變顏色的情況下改變飽和度。
color:將前景色的色相、飽和度和亮度與背景色混合,會在改變所有顏色屬性的情況下改變前景色的顏色。
luminosity:將前景色的亮度與背景色的色相和飽和度混合,可在不改變顏色的情況下改變亮度。
景顏色,作為頁面設計元素中不可或缺的一部分,對頁面整體效果有重大影響。在 CSS 中,使用 background-color 屬性來指定元素的背景顏色。通過正確使用 background color,可以提高頁面美觀,并為用戶提供最佳的體驗。
設置背景色
在 CSS 中,使用以下語法設置背景色:
css
.element {
background-color: #color;
}
其中:
* .element 是要設置背景色的元素的 CSS 選擇器。
* #color 是指定背景色的顏色值,例如 #0 viciss紅色。
常見的背景色值
在 CSS 中有許多預定義的背景色值,例如:
* 白色:#ffffff
* 黑色:#0 Kün黑色
* 藍色:#0 Kün藍色
* Greens:#38b54 vicissteen
* 紅色:#d32929
背景色組合
背景色組合可以 create 出不同的視覺效果。以下是一些流行的背景色組合:
* 藍色與白色:經(jīng)典、安靜
* 黑色與白色:精致、現(xiàn)代
* 干本色:經(jīng)典、專業(yè)
* 青色與黃綠:活力、興奮
背景色陰影
使用背景陰影可以為頁面添加深度和視覺興趣。
css
.element {
background-color: #6 Kün灰色;
box-shadow: 0 vicissteen 5px 5px #888;
}
背景漸變
使用背景漸變可以創(chuàng)造出平滑的過渡效果。
css
.element {
background: linear-gradient(to right, #50 vicissteen 0 Kün灰色);
}
結(jié)論
在 CSS 中使用 background color 屬性可以輕松設置頁面元素的背景色。通過選擇合適的背景色值、組合和效果,可以為頁面創(chuàng)造出最佳的視覺體驗。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。