為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屬性可以采用的值。
希望本文對您有所幫助。謝謝閱讀。
片
當我們在制作頁面的時候,通常會遇到圖片的三種表現形式,如下:
1、內容圖片
內容圖片是頁面中真正的內容,沒有內容圖片,就無法完整的理解頁面內容。如淘寶網上的商品展示圖片,這些圖片是網頁的一部分,它們能幫助你決定這個頁面的內容是否是你需要的。
內容圖片
2、布局圖片
布局圖片出現在頁面背景中,要想理解頁面的內容,它們不是必須的。如蘋果官網的這個圖片,沒有這個圖片也能理解頁面上文字描述的內容是什么意思。
布局圖片
3、交互圖片
圖中用紅色框起來的圖片會給你瀏覽頁面的時候帶來一些幫助,如搜索圖片,一看到就知道這里可以搜索想要的東西,購物車圖片可以看到選購的產品,箭頭圖片點擊可以看到更詳細的產品等。
交互圖片
在HTML中我們用 img 標簽創建圖片,英文是image的縮寫。
<img src="" alt="">
內容圖片
布局圖片是在CSS中被創建出來的,使用CSS中的background屬性,如:
1)background-color 定義背景顏色,設置背景圖片時,要始終設置背景顏色,確保背景圖片沒有成功時會顯示一個背景顏色
2)background-image 可以指向一個相對路徑或者絕對路徑來添加圖片。
3)background-repeat可以設置背景是否平鋪在容器中,包含四個關鍵字:
4)background-position 屬性可以控制背景圖片顯示在什么位置,包含兩個關鍵字,如:
background-position:top left 設置圖片顯示在容器的左上角,第一個關鍵字可以是top、center、bottom,第二個關鍵字可以是left、center、right
CSS中和背景相關的屬性可以簡寫在一行中,如:
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是圖片的顏色color,image,position,repeat,CSS屬性能用簡寫就盡量用簡寫,簡寫比分開寫性能更高。
布局圖片
Web上最常用的三種圖像格式
1)Jpeg 可以展示一張照片或者復雜圖像
2)png最適合展示網頁插畫、logo和網頁小圖標
3)gif適合展示網頁插畫、logo和網頁小圖標
建議:
一般情況下用戶交互圖片都是一些小圖標,所以使用png或gif作為用戶交互圖片;使用CSS的background屬性以背景圖片的形式為網頁添加用戶交互圖片;推薦把用戶交互圖片放在同一個文件中,可以提高網絡和服務器性能,如:
交互圖片
交互圖片
具體如何操作呢?后續教頭會通過視頻給大家詳細演示,請繼續關注。
文將介紹一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相關屬性,制作一些稍微復雜、酷炫的背景。
通過本文,你將會了解到 CSS background 中更為強大的一些用法,并且學會利用 background 相關的一些屬性,采用不同的方式,去創造更復雜的背景圖案。在這個過程中,你會更好的掌握不同的漸變技巧,更深層次的理解各種不同的漸變。
同時,借助強大的 CSS-Doodle,你將學會如何運用一套規則,快速創建大量不同的隨機圖案,感受 CSS 的強大,走進 CSS 的美。
背景基礎知識
我們都知道,CSS 中的 background 是非常強大的。
首先,復習一下基礎,在日常中,我們使用最多的應該就是下面 4 種:
背景進階
當然。掌握了基本的漸變之后,我們開始向更復雜的背景圖案進發。我最早是在《CSS Secret》一書中接觸學習到使用漸變去實現各種背景圖案的。然后就是不斷的摸索嘗試,總結出了一些經驗。
在嘗試使用漸變去制作更復雜的背景之前,列出一些比較重要的技巧點:
接下來,開始組合之旅。
使用 mix-blend-mode
mix-blend-mode ,混合模式。最常見于 photoshop 中,是 PS 中十分強大的功能之一。在 CSS 中,我們可以利用混合模式將多個圖層混合得到一個新的效果。
關于混合模式的一些基礎用法,你可以參考我的這幾篇文章:
然后,我們來嘗試第一個圖案,先簡單體會一下 mix-blend-mode 的作用。
我們使用 repeating-linear-gradient 重復線性漸變,制作兩個角度相反的背景條紋圖。正常而言,不使用混合模式,將兩個圖案疊加在一起,看看會發生什么。
額,會發生什么就有鬼了:sweat_smile: 。顯而易見,由于圖案不是透明的,疊加在一起之后,由于層疊的關系,只能看到其中一張圖。
好,在這個基礎上,我們給最上層的圖案,添加 mix-blend-mode: multiply,再來一次,看看這次會發生什么。
可以看到,添加了混合模式之后,兩張背景圖通過某種算法疊加在了一起,展現出了非常漂亮的圖案效果,也正是我們想要的效果。
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode
嘗試不同的 mix-blend-mode
那為什么上面使用的是 mix-blend-mode: multiply 呢?用其他混合模式可以不可以?
當然可以。這里僅僅只是一個示例,mix-blend-mode: multiply 在 PS 中意為正片疊底,屬于圖層混合模式的變暗模式組之一。
我們使用上面的 DEMO,嘗試其他的混合模式,可以得到不同的效果。
可以看到,不同的混合模式的疊加,效果相差非常之大。當然,運用不同的混合模式,我們也就可以創造出效果各異的圖案。
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode
借助 CSS-Doodle 隨機生成圖案
到這,就不得不引出一個寫 CSS 的神器 -- CSS-Doodle,我在其他非常多文章中也多次提到過 CSS-doodle,簡單而言,它是一個基于 Web-Component 的庫。允許我們快速的創建基于 CSS Grid 布局的頁面,并且提供各種便捷的指令及函數(隨機、循環等等),讓我們能通過一套規則,得到不同 CSS 效果。
還是以上面的 DEMO 作為示例,我們將 repeating-linear-gradient 生成的重復條紋背景的顏色、粗細、角度隨機化、采用的混合模式也是隨機選取,然后利用 CSS-Doodle,快速隨機的創建各種基于此規則的圖案:
可以點進去嘗試一下,點擊鼠標即可隨機生成不同的效果:
CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background
嘗試使用徑向漸變
當然,上面使用的是線性漸變,同樣,我們也可以使用徑向漸變運用同樣的套路。
我們可以使用徑向漸變,生成多重的徑向漸變。像是這樣:
給圖片應用上 background-size,它就會像是這樣:
像上文一樣,我們稍微對這個圖形變形一下,然后疊加兩個圖層,給最上層的圖形,添加 CSS 樣式 mix-blend-mode: darken:
CodePen Demo -- radial-gradient & mix-blend-mode Demo
借助 CSS-Doodle 隨機生成圖案
再來一次,我們使用 CSS-Doodle,運用上述的規則在徑向漸變,也可以得到一系列有意思的背景圖。
可以點進去嘗試一下,點擊鼠標即可隨機生成不同的效果:
CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background 2
當然,上述的疊加都是非常簡單的圖案的疊加,但是掌握了這個原理之后,就可以自己嘗試,去創造更復雜的融合。:dog:
上述的疊加效果是基于大片大片的實色的疊加,當然 mix-blend-mode 還能和真正的漸變碰撞出更多的火花。
在不同的漸變背景中運用混合模式
在不同的漸變背景中運用混合模式?那會產生什么樣美妙的效果呢?
運用得當,它可能會像是這樣:
umm,與上面的條紋圖案完全不一樣的風格。
你可以戳進 gradienta.io 來看看,這里全是使用 CSS 創建的漸變疊加的背景圖案庫。
使用混合模式疊加不同的漸變圖案
下面,我們也來實現一個。
首先,我們使用線性漸變或者徑向漸變,隨意創建幾個漸變圖案,如下所示:
接著,我們兩兩之間,從第二層開始,使用一個混合模式進行疊加,一共需要設定 5 個混合模式,這里我使用了 overlay, multiply, difference, difference, overlay。看看疊加之后的效果,非常的 Nice:
CodePen Demo -- Graideint background mix
由于上面動圖 GIF 的壓縮率非常高,所以看上去鋸齒很明顯圖像很模糊,你可以點進上面的鏈接看看。
然后,我們可以再給疊加后的圖像再加上一個 filter: hue-rotate(),讓他動起來,放大一點點看看效果,絢麗奪目的光影效果:
CodePen Demo -- Graideint background mix 2
借助 CSS-Doodle 隨機生成圖案
噔噔噔,沒錯,這里我們又可以繼續把 CSS-Doodle 搬出來了。
隨機的漸變,隨機的混合模式,疊加在一起,燥起來吧。
使用 CSS-Doodle 隨機創建不同的漸變,在隨機使用不同的混合模式,讓他們疊加在一起,看看效果:
當然,由于是完全隨機生成的效果,所以部分時候生成出來的不算太好看或者直接是純色的。不過大部分還是挺不錯的 :joy:
CodePen Demo -- CSS Doodle Mix Gradient
感謝堅持,看到這里。
上述上半部分主要使用的混合模式。
關注我看下半部分,將主要使用 mask
精彩繼續~
*請認真填寫需求信息,我們會在24小時內與您取得聯系。