篇文章主要講述了CSS的基礎(chǔ)用法，講述了如何定義頭文件，導(dǎo)入CSS文件，id和class選擇器，元素選擇器，后代選擇器，子元素選擇器，兄弟選擇器，偽類(lèi)選擇器等等，讓大家對(duì)CSS選擇器有個(gè)簡(jiǎn)單的認(rèn)識(shí)和了解。這篇接上篇文章，繼續(xù)講解CSS的基礎(chǔ)用法。

背景Background

背景可以設(shè)置很多，比如背景顏色，背景圖片，背景定位，背景重復(fù)，背景關(guān)聯(lián)，

1)).背景顏色

<div style='background-color='red'></div>

2)).背景圖片

<div style='background-image: url('1.png');'></div>

3)).背景定位

<div style='background-position:center'></div>
center   中間
top      頂部
bottom   底部
right    右邊
left     左邊
還可以使用百分比來(lái)設(shè)置定位：
<div style='background-position:40% 50%'></div>
或者設(shè)置像素值：
<div style='background-position:100px 100px'></div>

4)).背景顯示方式

<div style=' background-repeat:repeat-x'></div>
repeat-x 水平平鋪圖片
repeat-y 垂直平鋪圖片
no-repeat 不平鋪圖片

5)).背景滾動(dòng)條

<div style='background-attachment:fixed'></div>
fixed   固定 不出現(xiàn)滾動(dòng)條
scroll  出現(xiàn)滾動(dòng)條
no      沒(méi)有滾動(dòng)條

6)).背景大小

<div style='background-size:50px 50px'></div>

7)).背景圖片的定位區(qū)域

<div style='background-origin:content-box'></div>
content-box  文本內(nèi)容區(qū)域
padding-box   內(nèi)邊距區(qū)域
border-box    外邊框區(qū)域

8)).背景裁剪區(qū)域

<div style='background-clip:content-box'></div>
content-box  裁剪文本內(nèi)容區(qū)域
padding-box  裁剪內(nèi)邊距區(qū)域
border-box   裁剪外邊框區(qū)域

總結(jié)

這篇文章主要介紹了CSS樣式更改篇中的背景Background的基本設(shè)置，希望讓大家對(duì)CSS選擇器有個(gè)簡(jiǎn)單的認(rèn)識(shí)和了解。
****看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人****

想要學(xué)習(xí)更多，請(qǐng)前往Python爬蟲(chóng)與數(shù)據(jù)挖掘?qū)Ｓ镁W(wǎng)站：http://pdcfighting.com/

信ID：WEB_wysj(點(diǎn)擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（頁(yè)底留言開(kāi)放，歡迎來(lái)吐槽）

● ● ●

1、半透明邊框

難題：直接設(shè)置一個(gè)半透明的邊框不起作用。

解決方案：padding-box盒模型border:10px solid rgba(255,255,255,.5);background: white;background-clip: padding-box;

2、多重邊框

背景知識(shí):box-shadow 的基本用法

box-shadow: X軸偏移量 Y軸偏移量 [模糊半徑] [擴(kuò)展半徑] [陰影顏色] [投影方式];

解決方案一：

利用box-shadow的屬性擴(kuò)張半徑background: 
yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
特點(diǎn)：box-shadow 方案只能模擬實(shí)線邊框，會(huì)貼合元素的圓角

解決方案二：outline 方案background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;特點(diǎn)：實(shí)現(xiàn)的“邊框”不會(huì)貼合元素的圓角，可以實(shí)現(xiàn)虛線邊框

3、靈活的背景定位

示例：實(shí)現(xiàn)一個(gè)背景圖在div右下角，距離右邊10px 下邊10px 如圖;

解決方案一：background-position擴(kuò)展方案background: #58a url(code-pirate.svg) no-repeat bottom right;background-position: right 10px bottom 10px;

解決方案二：background-origin 方案padding: 10px;background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */background-origin: content-box;

解決方案三：calc 方案background: url("code-pirate.svg") no-repeat;background-position: calc(100% - 20px) calc(100% - 10px);

4、邊框內(nèi)圓角

兩個(gè)div很容易實(shí)現(xiàn)，那么一個(gè)div呢？

解決方案：利用box-shadow和outlinebackground: tan;border-radius: .8em;padding: 1em;outline: .6em solid #655;box-shadow: 0 0 0 .4em #655; 

box-shadow的寬要小于outline寬度值，大于 (Math.sqrt(2)-1)r（這里的 r 表示 border-radius）

5、條紋背景

背景知識(shí)：CSS 線性漸變，background-size

案例一：等寬的雙色水平條紋

background: linear-gradient(#fb3 50%, #58a 0);background-size: 100% 30px;

案例二：不等寬的雙色水平條紋

background: linear-gradient(#fb3 30%, #58a 0);background-size: 100% 30px;

案例三：三色水平條紋

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;

案例四：垂直條紋

background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);background-size: 30px 100%;

案例五：斜向條紋

失敗方案：改變 background-size 的值和漸變的方向background: linear-gradient(45deg, #fb3 50%, #58a 0);background-size: 30px 30px;

正確方案：做到無(wú)縫拼接(60度的條紋不好做)background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;

優(yōu)化方案：重復(fù)漸變做60度條紋background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);height:100%;

案例六：靈活的同色系斜向條紋

在大多數(shù)情況下，我們想要的條紋圖案并不是由差異極大的幾種顏色組成的，這些顏色往往屬于同一色系。

失敗方案：沒(méi)有任何瀏覽器支持下面這個(gè)特性background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);正確方案：不再為每種條紋單獨(dú)指定顏色，而是把最深的顏色指定為背景色，同時(shí)把半透明白色的條紋疊加在背景色之上來(lái)得到淺色條紋background: #58a;background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);

6、復(fù)雜的背景圖案

背景知識(shí)：CSS 漸變，“條紋背景”

CSS3 圖案庫(kù)lea.verou.me/css3patterns

7、偽隨機(jī)背景

背景知識(shí)：CSS 漸變，“條紋背景”，“復(fù)雜的背景圖案”

大自然不會(huì)以“無(wú)縫”貼片的方式重復(fù)自己......

蟬原則：通過(guò)質(zhì)數(shù)來(lái)增加隨機(jī)真實(shí)性

蟬漸變圖案：條紋圖案把不同尺寸的漸變圖案疊加起來(lái)，并使用質(zhì)數(shù)來(lái)增加隨機(jī)的真實(shí)感

background: hsl(20, 40%, 90%);background-image: linear-gradient(90deg, #fb3 11px, transparent 0), linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 41px, transparent 0);background-size: 41px 100%, 61px 100%, 83px 100%;

8、連續(xù)的圖像邊框

背景知識(shí)：CSS 漸變，基本的 border-image，“條紋背景”，基本的 CSS 動(dòng)畫(huà)案例一：一個(gè)元素有一圈裝飾性的邊框，基本上就是一張圖片被裁剪進(jìn)了邊框所在的方環(huán)區(qū)域。不僅如此，我們還希望這個(gè)元素的尺寸在擴(kuò)大或縮小時(shí)，這幅圖片都可以自動(dòng)延伸并覆蓋完整的邊框區(qū)域。

最簡(jiǎn)單的辦法是使用兩個(gè)HTML 元素：一個(gè)元素用來(lái)把我們的石雕圖片設(shè)為背景，另一個(gè)元素用來(lái)存放內(nèi)容，并設(shè)置純白背景，然后覆蓋在前者之上。問(wèn)題來(lái)了：如果只用一個(gè)元素，我們能做到這個(gè)效果嗎？

解決方案：padding: 1em;border: 1em solid transparent;background:linear-gradient(white, white) padding-box,url(stone-art.jpg) border-box 0 / cover;

案例二；老式信封樣式的邊框

案例三：螞蟻行軍邊框

@keyframes ants { to { background-position: 100% } }.marching-ants {padding: 1em;border: 1px solid transparent;background:linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;animation: ants 12s linear infinite;}

案例四：邊框的裁切效果，用來(lái)模擬傳統(tǒng)的腳注

border-top: .2em solid transparent;border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);padding-top: 1em;

干貨！免費(fèi)領(lǐng)取騰訊高級(jí)講師網(wǎng)頁(yè)設(shè)計(jì)教程

點(diǎn)我領(lǐng)取

???

關(guān)注網(wǎng)頁(yè)設(shè)計(jì)自學(xué)平臺(tái)，99%的努力都在這里

▼無(wú)法識(shí)別二維碼可以點(diǎn)「閱讀原文」噢！

們學(xué)習(xí) CSS 背景屬性。

假設(shè)這里有個(gè) div 容器，寬 400，高 300，默認(rèn)情況下，這個(gè) div 是沒(méi)有背景的，或者說(shuō)它的背景是透明的，我們拿一張圖片實(shí)驗(yàn)一下就能看得出來(lái)，這個(gè) div 在默認(rèn)情況下，背景是透明的。

也可以給 div 加一個(gè)背景顏色。

既然可以設(shè)置背景顏色，那么當(dāng)然也可以給這個(gè) div 設(shè)計(jì)一個(gè)背景圖片，就像這樣。但是由于這個(gè) div 已經(jīng)被我設(shè)定了大小，圖片呢，是大于這個(gè)容器的，所以實(shí)際上，我們最終看到的效果，是這個(gè)樣子的。我們只能看到圖片的一部分。下面我們就來(lái)看看應(yīng)用 CSS 背景屬性如何實(shí)現(xiàn)這個(gè)效果。

創(chuàng)建一個(gè) css-background.html 文件和一個(gè) background-style.css 文件。接下來(lái)，我們打算給整個(gè)頁(yè)面來(lái)添加背景圖片。

事實(shí)上，body 元素也是一個(gè)容器，可以直接給 body 添加背景圖片。body 容器默認(rèn)水平方向上，是占滿整個(gè)窗口的，我們來(lái)給它添加一個(gè)高度樣式，定義選擇器 body，聲明樣式 height: 100%。

CSS
body {
  height: 100%;
}

預(yù)覽一下效果，按下 F12，來(lái)觀察一下頁(yè)面 body 元素的大小，我們發(fā)現(xiàn) body 依然是只有寬度，沒(méi)有高度。為什么我們?cè)O(shè)置的高度 100% 不管用呢？大家注意，這里的100%是相對(duì)于它的父元素高度的，body 元素的父元素是 html，這個(gè)元素我們并沒(méi)有給它設(shè)置大小。

所以，在 body 選擇器前面加一個(gè) html 逗號(hào) ( html, )，這樣兩個(gè)元素都設(shè)置了高度。讓他們的高度和瀏覽器窗口大小保持一致。

這時(shí)再來(lái)看一下頁(yè)面，現(xiàn)在 body 和整個(gè)窗口就一樣大了。

CSS
html, body {
  height: 100%;
}

下面我們給 body 添加背景圖片，可以通過(guò) background-image 屬性實(shí)現(xiàn)，屬性值為 url 后跟一個(gè)小括號(hào)，括號(hào)里面填寫(xiě)背景圖片的路徑 （url(./duck.gif)）。

回到樣式代碼，再定義一個(gè) body 選擇器，單獨(dú)給它再聲明樣式 background-image: url(./duck.gif)。這個(gè)圖片是一個(gè)動(dòng)態(tài)圖片。

我們來(lái)觀看一下效果，為什么會(huì)出現(xiàn)這么多的圖片呢？我明明只是加了一張背景圖而已。原因是，當(dāng)我們給元素添加背景圖片的時(shí)候，圖片是以平鋪的方式來(lái)展現(xiàn)的。

什么是平鋪呢？就是當(dāng)我們放入一張背景圖的時(shí)候，這個(gè)圖片在默認(rèn)情況下，會(huì)向四周擴(kuò)散，無(wú)限的進(jìn)行重復(fù)，就變成了這個(gè)樣子。當(dāng)然了，容器是有大小限制的，最終我們能看到的部分呢，也就這么多而已。

如果我們不希望這個(gè)背景圖是重復(fù)的，需要使用一個(gè)新的背景屬性 background-repeat，取值為 no-repeat。

我們來(lái)看效果，最終就只有一張動(dòng)圖了。

接下來(lái)我們來(lái)修改一下，將背景圖片換成另外一張圖片。

再來(lái)觀察這個(gè)效果，由于不允許平鋪，我們只看到了一張圖片。

把 background-repeat 屬性值 no-repeat 改為 repeat。

我們就看到了這樣的效果。

在平時(shí)開(kāi)發(fā)的時(shí)候，給一個(gè)網(wǎng)頁(yè)或一個(gè)比較大的容器設(shè)置背景，經(jīng)常會(huì)采用這樣的技巧，放一個(gè)小的圖片進(jìn)去，只需要讓它保持平鋪的方式，我就會(huì)得到一張無(wú)限大的圖。

再回到剛才的例子。如果要求這個(gè)背景圖片在頁(yè)面中間顯示，我們?nèi)绾握{(diào)整背景圖的位置呢？

我們需要使用 background-position 屬性，這個(gè)屬性需要寫(xiě)兩個(gè)值：第一個(gè)值表示在水平方向上的對(duì)齊方式——left，center，right。第二個(gè)值表示在垂直方向上的對(duì)齊方式——top，center ，bottom。

給 body 添加樣式 background-position: center center，也就是水平垂直居中。

大家發(fā)現(xiàn)，圖片移到了頁(yè)面的中間。如果將圖片放到右下角，屬性值該如何設(shè)置呢？把答案寫(xiě)到公屏上吧。

回到 html 代碼，添加一個(gè) h1 元素和五個(gè) p 元素，填入一些文本。再?gòu)?fù)制五份。

再回到 css 代碼，背景圖恢復(fù)為 bg.png，圖片平鋪方式為 repeat。

我們看一下效果，可以通過(guò)滾動(dòng)條來(lái)查看網(wǎng)頁(yè)內(nèi)容，仔細(xì)觀察，文字和背景圖片一起滾動(dòng)。那能否實(shí)現(xiàn)文字滾動(dòng)，背景圖片不動(dòng)呢？大家可以先腦補(bǔ)一下效果。

實(shí)現(xiàn)這個(gè)效果，需要使用 background-attachment 屬性，用來(lái)聲明容器里的背景圖片與內(nèi)容的依附方式。值 fixed：圖片固定，值 scroll：同時(shí)滾動(dòng)。

給 body 選擇器添加樣式 background-attachment

[??t?t?m?nt] : fixed。

再看一下效果，滾動(dòng)一下頁(yè)面，背景固定的效果實(shí)現(xiàn)了！

前面我們多次使用到了 background-color 屬性，它可以給容器設(shè)置背景顏色，值可以設(shè)置為顏色名稱(chēng)，十六進(jìn)制顏色值，RGB顏色值等等。

把背景圖片的樣式注釋掉，添加 background-color 屬性，值為 green。

此時(shí)，整個(gè)頁(yè)面背景為綠色！顏色有點(diǎn)深，可以讓綠色變的淺一些嗎？

你能想到的方法應(yīng)該是換一個(gè)其他的顏色值，其實(shí)，我們可以通過(guò)讓背景透明一些，同樣可以實(shí)現(xiàn)這個(gè)效果。

這需要學(xué)習(xí)一個(gè)新的顏色值表示方法——rgba。這里的 rgb 就是 rgb 顏色值，a 是 alpha 的簡(jiǎn)寫(xiě)，表示通過(guò)設(shè)置一個(gè) alpha 通道，來(lái)指定顏色的不透明度，是一個(gè)介于 0 到 1 的數(shù)字。0表示完全透明，1 表示完全不透明。比如 rgba(0, 0, 0, 0.5)，表示的顏色就是黑色半透明。

把 green 顏色名稱(chēng)改為 rgba(0, 255, 0, 0.1)。

我們看，頁(yè)面綠色的背景因?yàn)橥该鳎伾儨\了！

為了縮短代碼，也可以使用單一的 background 來(lái)指定所有的背景屬性。

可以把 body 的全部背景屬性，合并在一個(gè) background 屬性里。注釋所有代碼，聲明屬性 background，值可以寫(xiě)為：顏色值 rgba(0, 255, 0, 0.1)， 背景圖片 url(./duck.gif)，平鋪方式 no-repeat，背景圖位置 right bottom，背景依附 fixed。 （rgba(0, 255, 0, 0.1) url(./bg.png) no-repeat right bottom fixed;）

我們看，一句聲明，實(shí)現(xiàn)了全部的背景效果！

文章配套視頻鏈接： https://www.bilibili.com/video/BV1oU4y1278g/?p=75