整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML背景色教程–如何更改Div背景色,并通過代碼示例進行了說明

          為Web開發(fā)人員,最常見的事情之一就是更改HTML元素的背景顏色。但是,如果您不了解如何使用CSS background-color屬性,可能會產(chǎn)生混淆。在本文中,我們討論以下幾點

          1.HTML元素的默認背景色值

          2.如何更改div的背景顏色,這是非常常見的元素

          3.該background-color屬性會影響CSS盒子模型的哪些部分,以及

          4.此屬性可以采用的不同值。

          元素的默認背景色

          div的默認背景顏色是transparent。因此,如果您不指定div的背景色,它將顯示其父元素的背景色。

          更改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模型的各個部分。

          背景顏色和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在背景顏色和文本顏色之間具有更好的對比度。因此,它使人們更容易閱讀和閱讀。

          結(jié)論

          在本文中,我們看到了如何更改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)造出最佳的視覺體驗。


          主站蜘蛛池模板: 日本一区二区在线播放| 亚洲AV无码一区二区二三区入口 | 成人免费视频一区二区| 无码人妻一区二区三区在线视频| 国产成人精品一区二区三区无码| 亚洲第一区在线观看| 99国产精品欧美一区二区三区| 国产伦精品一区二区三区视频金莲| 国产成人精品第一区二区| 99精品一区二区免费视频| bt7086福利一区国产| 国产成人一区二区三区| 亚洲AV无码一区二区一二区| 四虎成人精品一区二区免费网站 | 国产色情一区二区三区在线播放| 国产福利一区二区在线视频 | 91麻豆精品国产自产在线观看一区 | 日本香蕉一区二区三区| 色欲精品国产一区二区三区AV| 2021国产精品一区二区在线| 在线观看中文字幕一区| 国模大胆一区二区三区| 久久久人妻精品无码一区 | 亚洲熟女综合色一区二区三区| 久久精品国内一区二区三区| 一区二区三区在线观看中文字幕 | 久久亚洲一区二区| 国产伦精品一区二区三区在线观看| 精品乱子伦一区二区三区| 精品无码一区二区三区爱欲九九 | 一区二区三区免费高清视频| 久久精品综合一区二区三区| av无码免费一区二区三区| 国产高清在线精品一区二区| 国产麻豆精品一区二区三区| 国产一区视频在线| 精品一区二区三区免费观看| 在线成人综合色一区| 亚洲爆乳精品无码一区二区三区| 精品不卡一区中文字幕 | 亚洲AV色香蕉一区二区|