整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ss背景可以是純色，也可以是圖片。
背景色
background-color 屬性為元素設(shè)置背景色。
p{background-color: #ccc;}
在瀏覽器中顯示：
設(shè)置p元素的背景顏色為灰色
注意：background-color 不能繼承，其默認(rèn)值是 transparent（透明的）。如果一個(gè)元素沒有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見。
背景圖像
background-image屬性可以設(shè)置圖片作為其背景。background-image 屬性的默認(rèn)值是 none，表示背景上沒有放置任何圖像。
body{background-image: url(../img/flower.jpg)}
上面代碼的意思是給body元素添加一個(gè)背景圖片，url里面是圖片的路徑。我們先看一下原圖：
背景圖原圖
那么我們?cè)倏匆幌聻g覽器中顯示的背景圖效果：
驚不驚喜，意不意外！因?yàn)樵瓐D的大小不足以平鋪整個(gè)body,所以默認(rèn)對(duì)背景圖進(jìn)行平鋪。如果你不想讓背景平鋪或者想控制它水平或者垂直平鋪，那么用background-repeat 最理想了。
背景重復(fù)
background-repeat 屬性設(shè)置是否及如何重復(fù)背景圖像。
常用屬性值：
repeat 默認(rèn)，背景圖像將在垂直方向和水平方向平鋪。
repeat-x 水平方向平鋪。
repeat-y 垂直方向平鋪。
no-repeat 背景只顯示一次。
我們用其中的一個(gè)屬性值演示一下，其他的童靴們自己練習(xí)。
給背景圖設(shè)置background-repeat：no-repeat ,水平和垂直都不平鋪。
設(shè)置背景圖只顯示一次
在瀏覽器中顯示：
你必須非常努力，才能看起來毫不費(fèi)力！
關(guān)注小白前端，持續(xù)收到文章推送！
文將介紹一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相關(guān)屬性，制作一些稍微復(fù)雜、酷炫的背景。
通過本文，你將會(huì)了解到 CSS background 中更為強(qiáng)大的一些用法，并且學(xué)會(huì)利用 background 相關(guān)的一些屬性，采用不同的方式，去創(chuàng)造更復(fù)雜的背景圖案。在這個(gè)過程中，你會(huì)更好的掌握不同的漸變技巧，更深層次的理解各種不同的漸變。
同時(shí)，借助強(qiáng)大的 CSS-Doodle，你將學(xué)會(huì)如何運(yùn)用一套規(guī)則，快速創(chuàng)建大量不同的隨機(jī)圖案，感受 CSS 的強(qiáng)大，走進(jìn) CSS 的美。
背景基礎(chǔ)知識(shí)
我們都知道，CSS 中的 background 是非常強(qiáng)大的。
首先，復(fù)習(xí)一下基礎(chǔ)，在日常中，我們使用最多的應(yīng)該就是下面 4 種：
背景進(jìn)階
當(dāng)然。掌握了基本的漸變之后，我們開始向更復(fù)雜的背景圖案進(jìn)發(fā)。我最早是在《CSS Secret》一書中接觸學(xué)習(xí)到使用漸變?nèi)?shí)現(xiàn)各種背景圖案的。然后就是不斷的摸索嘗試，總結(jié)出了一些經(jīng)驗(yàn)。
在嘗試使用漸變?nèi)ブ谱鞲鼜?fù)雜的背景之前，列出一些比較重要的技巧點(diǎn)：
接下來，開始組合之旅。
使用 mix-blend-mode
mix-blend-mode ，混合模式。最常見于 photoshop 中，是 PS 中十分強(qiáng)大的功能之一。在 CSS 中，我們可以利用混合模式將多個(gè)圖層混合得到一個(gè)新的效果。
關(guān)于混合模式的一些基礎(chǔ)用法，你可以參考我的這幾篇文章：
然后，我們來嘗試第一個(gè)圖案，先簡(jiǎn)單體會(huì)一下 mix-blend-mode 的作用。
我們使用 repeating-linear-gradient 重復(fù)線性漸變，制作兩個(gè)角度相反的背景條紋圖。正常而言，不使用混合模式，將兩個(gè)圖案疊加在一起，看看會(huì)發(fā)生什么。
額，會(huì)發(fā)生什么就有鬼了:sweat_smile: 。顯而易見，由于圖案不是透明的，疊加在一起之后，由于層疊的關(guān)系，只能看到其中一張圖。
好，在這個(gè)基礎(chǔ)上，我們給最上層的圖案，添加 mix-blend-mode: multiply，再來一次，看看這次會(huì)發(fā)生什么。
可以看到，添加了混合模式之后，兩張背景圖通過某種算法疊加在了一起，展現(xiàn)出了非常漂亮的圖案效果，也正是我們想要的效果。
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode
嘗試不同的 mix-blend-mode
那為什么上面使用的是 mix-blend-mode: multiply 呢？用其他混合模式可以不可以？
當(dāng)然可以。這里僅僅只是一個(gè)示例，mix-blend-mode: multiply 在 PS 中意為正片疊底，屬于圖層混合模式的變暗模式組之一。
我們使用上面的 DEMO，嘗試其他的混合模式，可以得到不同的效果。
可以看到，不同的混合模式的疊加，效果相差非常之大。當(dāng)然，運(yùn)用不同的混合模式，我們也就可以創(chuàng)造出效果各異的圖案。
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode
借助 CSS-Doodle 隨機(jī)生成圖案
到這，就不得不引出一個(gè)寫 CSS 的神器 -- CSS-Doodle，我在其他非常多文章中也多次提到過 CSS-doodle，簡(jiǎn)單而言，它是一個(gè)基于 Web-Component 的庫。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁面，并且提供各種便捷的指令及函數(shù)（隨機(jī)、循環(huán)等等），讓我們能通過一套規(guī)則，得到不同 CSS 效果。
還是以上面的 DEMO 作為示例，我們將 repeating-linear-gradient 生成的重復(fù)條紋背景的顏色、粗細(xì)、角度隨機(jī)化、采用的混合模式也是隨機(jī)選取，然后利用 CSS-Doodle，快速隨機(jī)的創(chuàng)建各種基于此規(guī)則的圖案：
可以點(diǎn)進(jìn)去嘗試一下，點(diǎn)擊鼠標(biāo)即可隨機(jī)生成不同的效果：
CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background
嘗試使用徑向漸變
當(dāng)然，上面使用的是線性漸變，同樣，我們也可以使用徑向漸變運(yùn)用同樣的套路。
我們可以使用徑向漸變，生成多重的徑向漸變。像是這樣：
給圖片應(yīng)用上 background-size，它就會(huì)像是這樣：
像上文一樣，我們稍微對(duì)這個(gè)圖形變形一下，然后疊加兩個(gè)圖層，給最上層的圖形，添加 CSS 樣式 mix-blend-mode: darken：
CodePen Demo -- radial-gradient & mix-blend-mode Demo
借助 CSS-Doodle 隨機(jī)生成圖案
再來一次，我們使用 CSS-Doodle，運(yùn)用上述的規(guī)則在徑向漸變，也可以得到一系列有意思的背景圖。
可以點(diǎn)進(jìn)去嘗試一下，點(diǎn)擊鼠標(biāo)即可隨機(jī)生成不同的效果：
CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background 2
當(dāng)然，上述的疊加都是非常簡(jiǎn)單的圖案的疊加，但是掌握了這個(gè)原理之后，就可以自己嘗試，去創(chuàng)造更復(fù)雜的融合。:dog:
上述的疊加效果是基于大片大片的實(shí)色的疊加，當(dāng)然 mix-blend-mode 還能和真正的漸變碰撞出更多的火花。
在不同的漸變背景中運(yùn)用混合模式
在不同的漸變背景中運(yùn)用混合模式？那會(huì)產(chǎn)生什么樣美妙的效果呢？
運(yùn)用得當(dāng)，它可能會(huì)像是這樣：
umm，與上面的條紋圖案完全不一樣的風(fēng)格。
你可以戳進(jìn) gradienta.io 來看看，這里全是使用 CSS 創(chuàng)建的漸變疊加的背景圖案庫。
使用混合模式疊加不同的漸變圖案
下面，我們也來實(shí)現(xiàn)一個(gè)。
首先，我們使用線性漸變或者徑向漸變，隨意創(chuàng)建幾個(gè)漸變圖案，如下所示：
接著，我們兩兩之間，從第二層開始，使用一個(gè)混合模式進(jìn)行疊加，一共需要設(shè)定 5 個(gè)混合模式，這里我使用了 overlay, multiply, difference, difference, overlay。看看疊加之后的效果，非常的 Nice：
CodePen Demo -- Graideint background mix
由于上面動(dòng)圖 GIF 的壓縮率非常高，所以看上去鋸齒很明顯圖像很模糊，你可以點(diǎn)進(jìn)上面的鏈接看看。
然后，我們可以再給疊加后的圖像再加上一個(gè) filter: hue-rotate()，讓他動(dòng)起來，放大一點(diǎn)點(diǎn)看看效果，絢麗奪目的光影效果：
CodePen Demo -- Graideint background mix 2
借助 CSS-Doodle 隨機(jī)生成圖案
噔噔噔，沒錯(cuò)，這里我們又可以繼續(xù)把 CSS-Doodle 搬出來了。
隨機(jī)的漸變，隨機(jī)的混合模式，疊加在一起，燥起來吧。
使用 CSS-Doodle 隨機(jī)創(chuàng)建不同的漸變，在隨機(jī)使用不同的混合模式，讓他們疊加在一起，看看效果：
當(dāng)然，由于是完全隨機(jī)生成的效果，所以部分時(shí)候生成出來的不算太好看或者直接是純色的。不過大部分還是挺不錯(cuò)的 :joy:
CodePen Demo -- CSS Doodle Mix Gradient
感謝堅(jiān)持，看到這里。
上述上半部分主要使用的混合模式。
關(guān)注我看下半部分，將主要使用 mask
精彩繼續(xù)~
一篇文章呢，我們寫了相關(guān)CSS的基礎(chǔ)語法，包括CSS語法、多重聲明、選擇器的分組及CSS的引入，那么學(xué)會(huì)了怎么寫CSS，接下來就要想寫那些樣式，包括些什么樣式，由于內(nèi)容之多，所以分成上下篇，下面呢，我給大家介紹一下。
【引言】
通俗點(diǎn)說，就是給我們的網(wǎng)頁“化妝”，就像你女朋友化妝一樣，給頭發(fā)噴點(diǎn)水，給眼睛畫個(gè)眼線，給臉蛋抹點(diǎn)粉，然后穿上漂亮的衣服，網(wǎng)頁元素添加CSS樣式也一樣，大點(diǎn)說，給頁面頭部添加一個(gè)樣式，給導(dǎo)航添加一個(gè)樣式，給身體添加一個(gè)樣式，然后給底部添加一個(gè)樣式，就這樣才形成一個(gè)漂亮，所謂用戶體驗(yàn)度良好的頁面，然后加以數(shù)據(jù)請(qǐng)求讓它動(dòng)起來，都完事了，你才能帶女朋友出門，讓你的網(wǎng)頁上線。
讓我們來看看有哪些CSS樣式。
CSS允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建較為復(fù)雜的效果。
1、背景色（background-color）
可以為所有元素設(shè)置背景色，這包括body一直到<a></a>和<em></em>等行內(nèi)元素。background-color不能繼承，其默認(rèn)值是transparent，就是透明背景，相當(dāng)于沒有指定任何背景色。例如：
<style type="text/css">
h1 {
background: red;/*定義字體背景為紅色*/
padding: 20px;/*向外延伸*/
}
</style>
也可以增加內(nèi)邊距將背景色從元素中的文本向外延伸內(nèi)邊距值。
2、背景圖像（background-image）
使用background-image可以為元素設(shè)置背景圖像，其默認(rèn)值為none，表示背景圖像為空，如需設(shè)置，還需為這個(gè)屬性設(shè)置一個(gè)URL值，例如：
h1 {
background-image: url(images/demo.jpg);/*定義背景圖片*/
}這樣就為h1元素指定了一個(gè)名為“demo”的圖片，你也可以為行內(nèi)元素設(shè)置背景圖像，例如a鏈接元素。但背景圖片的設(shè)置有很多樣式，例如下面：
2.1、背景重復(fù)（background-repeat）
如果需要設(shè)置背景圖像為平鋪，屬性值為repeat，這樣一來就會(huì)讓背景圖像在水平垂直方向上都平鋪，方向由repeat-x和repeat-y控制，no-repeat則不會(huì)在任何方向上平鋪。默認(rèn)背景圖像從元素的左上角開始平鋪，例如：
h1 {
background-image: url(images/demo.jpg);/*定義背景圖片*/
background-repeat: no-repeat;/*不平鋪*/
background-repeat: repeat-y;/*在垂直方向平鋪*/
background-repeat: repeat-;/*在水平方向平鋪*/
}2.3、背景定位（background-position）
可以利用background-position屬性改變圖像在背景中的位置。讓背景圖像定位在想定位的地方。
h1 {
background-image: url("images/pig.jpg");/*定義背景圖片*/
background-color: cyan;/*定義背景顏色*/
background-repeat: repeat-y;/*在y軸平鋪*/
background-position:top center;/*兩個(gè)屬性值*/
background-size: 55px 44px;/*定義背景圖片大小*/
}為background-position屬性提供了很多值，例如：
關(guān)鍵字：top、bottom、left、right和center，一般情況下這些關(guān)鍵字都會(huì)成對(duì)出現(xiàn)。top left使圖像放置在元素內(nèi)邊距的右上角，根據(jù)規(guī)范，順序可以顛倒，說白了，就是方向左上、左下、右上、右下、中間，在數(shù)學(xué)上，平面內(nèi)一個(gè)點(diǎn)位置由（x，y）兩個(gè)坐標(biāo)確定，CSS中的背景圖像也是。
百分?jǐn)?shù)值：就是把（x，y）上的值由百分?jǐn)?shù)來確定。其默認(rèn)的百分?jǐn)?shù)值為0% 0%。相當(dāng)于top left。這就解釋了背景圖像為什么總是從元素的內(nèi)邊距區(qū)左上角開始平鋪。你設(shè)置定了值就根據(jù)你的值來確定位置。
長(zhǎng)度值：就是設(shè)置具體的值，5px 10px，開發(fā)中這種用的最多。
2.4、背景大小（background-size）
可以利用background-size來調(diào)整背景圖片的大小，讓其更好的適應(yīng)我們的元素。例如：
background-size: length|percentage|cover|contain;
length：設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。
background-size: 10px 20px;
percentage：以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。
background-size: 100% 100%;
cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
background-size: cover;
contain：把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
background-size: contain;
2.5、背景關(guān)聯(lián)（background-attachment）
有的時(shí)候要設(shè)置頁面滾動(dòng)，其背景圖像看起來固定的特效，就是說，頁面滾動(dòng)，滾動(dòng)到背景圖像位置的時(shí)候圖像出顯示，超過的時(shí)候，圖像就會(huì)消失。例如：
h1 {
background-image: url(images/demo.jpg);/*定義字體背景為紅色*/
background-attachment:fixed
}背景圖像
用一些CSS樣式對(duì)其文本進(jìn)行相關(guān)的操作。
1、對(duì)齊方式（text-align）
這個(gè)屬性它會(huì)影響元素中的文本行對(duì)齊的方式。
1.1、值center、left、right會(huì)導(dǎo)致元素中文本居中、左對(duì)齊、右對(duì)齊，例如，左對(duì)齊：text-align：left。
提示：將塊級(jí)元素或表元素居中，要通過在這些元素上適當(dāng)?shù)脑O(shè)置左、右外邊距來實(shí)現(xiàn)。
text-align:center 與 <CENTER>
這兩個(gè)作用大不相同，<center>不僅影響文本，還會(huì)把整個(gè)元素居中，而text-align:center只影響文本內(nèi)容。
1.2、justify
就是說兩端對(duì)齊，它會(huì)自動(dòng)調(diào)整文本間的間隔，使每行長(zhǎng)度一樣，文本看起來更整潔。此外還有一個(gè)屬性就是：text-align-last: center;把文本的最后一行居中顯示。
2、字間隔（word-spacing）
word-spacing屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔，默認(rèn)值為0，可以接受一個(gè)正值會(huì)負(fù)值，
h1 {word-spacing: 30px;}
h2 {word-spacing: -0.5em;}3、字母間隔（letter-spacing）
字母間隔修改的是字符或字母之間的間隔。也可以是正值或負(fù)值。
h1 {letter-spacing: -0.5em}
h2 {letter-spacing: 20px}4、字符轉(zhuǎn)化（text-transform）
text-transform屬性處理文本的大小寫，有4個(gè)值：none、uppercase、lowercase、capitalize，none就是啥也不變，uppercase，lowercase就是將文本轉(zhuǎn)化為大寫和小寫，capitalize只將首字母轉(zhuǎn)化為大寫。
h1 {
text-transform:none;
text-transform:uppercase;
text-transform:lowercase;
text-transform:capitalize;
}5、文本裝飾（text-decoration）
這個(gè)屬性是來處理文本的，估計(jì)沒這個(gè)屬性，有些字體只能切圖或者由更多的代碼來完成。有5個(gè)值，none、underline、overline、line-through、blink。none就是默認(rèn)啥也沒有，underline會(huì)對(duì)文本加下劃線，overline相反，會(huì)在文本頂端加上劃線，line-through則會(huì)在文本中間加一條線，blink會(huì)讓文本閃爍。
h1 {
text-decoration:none;
text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
text-decoration:blink;
}6、處理空白符（white-space）
這個(gè)屬性會(huì)影響源文檔中的空格，換行和tab字符處理，也有5個(gè)值，normal、pre、nowrap、pre-wrap、pre-line。注意后兩個(gè)在IE7和FireFox2.0瀏覽器中不支持。
6.1、normal
去除文本多余的空白符，包括換行符，多個(gè)空格符也會(huì)換為一個(gè)空格。
6.2、pre
加上這個(gè)，空白符的處理就不一樣，不會(huì)被忽略。
6.3、nowrap
防止文本換行。
6.4、pre-wrap和pre-line
作用是允許開發(fā)人員更好的控制空白符，設(shè)置為pre-wrap，文本保留空白符，也會(huì)正常換行，如果設(shè)置為pre-line，不會(huì)保留空白符，但會(huì)保留換行符。
h1 {
white-space:normal;
white-space:nowrap;
white-space:pre;
white-space:pre-line;
white-space:pre-wrap;
}7、文本方向（direction）
這個(gè)屬性影響塊級(jí)元素中的文本的方向，表中列布局的方向、內(nèi)容填充其元素框的方向、以及兩端對(duì)齊元素中最后一行的位置。
注意：對(duì)于行內(nèi)元素，只有當(dāng)unicode-bidi屬性設(shè)置為embed或bidioverride時(shí)才會(huì)應(yīng)用direction屬性。
direction屬性有兩個(gè)值：ltr和rtl。大多數(shù)情況下，默認(rèn)值是ltr，顯示從左到右的文本，如果顯示從右到左的文本，應(yīng)使用值rtl。
h1 {direction:rtl;unicode-bidi:bidi-override;}
h2{direction:ltr;unicode-bidi:embed;}8、縮進(jìn)文本（ text-indent）
這是一種常見的文本格式化效果，使得所有元素的第一行縮進(jìn)一個(gè)給定的長(zhǎng)度，也可以是負(fù)值。但無法應(yīng)用于行內(nèi)元素。
注意：也可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果，一般發(fā)表的新聞，文章之類的使用的較多。
p {text-indent: 5em;}
p {text-indent: -5em;}但是，使用負(fù)值的時(shí)候要當(dāng)心，如果設(shè)置了負(fù)值，那么首行的文本會(huì)超出瀏覽器窗口的左邊界。建議配合padding-left使用。
p {text-indent: -5em; padding-left: 5em;}8.1、適用百分比
百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素父元素的寬度。換句話說，如果將縮進(jìn)值設(shè)置為 20%，所影響元素的第一行會(huì)縮進(jìn)其父元素寬度的 20%。
例如，縮進(jìn)值是父元素的20%，即100px。
<style type="text/css">
div {width: 500px;}
p {text-indent: 20%;}
</style>
<div>
<p>這是一個(gè)段落</p>
</div>8.2、繼承
text-indent屬性可以繼承。就是說給父級(jí)設(shè)置了縮進(jìn)，子元素也會(huì)繼承該屬性，進(jìn)行縮進(jìn)。
9、文本陰影（text-shadow）
這個(gè)屬性設(shè)置文本陰影。所有的主流瀏覽器支持text-shadow，IE9以及更早的不支持。
基本語法為：
text-shadow: h-shadow v-shadow blur color;
text-shadow 屬性向文本添加一個(gè)或多個(gè)陰影。該屬性是逗號(hào)分隔的陰影列表，每個(gè)陰影有兩個(gè)或三個(gè)長(zhǎng)度值和一個(gè)可選的顏色值進(jìn)行規(guī)定。省略的長(zhǎng)度是 0。
h-shadow：水平陰影的位置。允許負(fù)值。
v-shadow：垂直陰影的位置。允許負(fù)值。
blue：模糊的距離
color：陰影的顏色
文本操作
CSS樣式中的背景和文本今天就講到這里了，下一篇講解CSS樣式中的字體、鏈接、列表、表格、輪廓，希望大家不要放棄學(xué)習(xí)哦！
PS：
本文為‘Web前端進(jìn)階指南’原創(chuàng)，手動(dòng)碼字不易，小伙伴們別忘了順手點(diǎn)個(gè)贊加個(gè)關(guān)注哈，有什么不懂得下方留言評(píng)論或私信。謝謝大家哈！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
