整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章主要講述了CSS的基礎用法，講述了如何定義頭文件，導入CSS文件，id和class選擇器，元素選擇器，后代選擇器，子元素選擇器，兄弟選擇器，偽類選擇器等等，讓大家對CSS選擇器有個簡單的認識和了解。這篇接上篇文章，繼續講解CSS的基礎用法。
背景可以設置很多，比如背景顏色，背景圖片，背景定位，背景重復，背景關聯，
<div style='background-color='red'></div><div style='background-image: url('1.png');'></div><div style='background-position:center'></div>
center 中間
top 頂部
bottom 底部
right 右邊
left 左邊
還可以使用百分比來設置定位：
<div style='background-position:40% 50%'></div>
或者設置像素值：
<div style='background-position:100px 100px'></div><div style=' background-repeat:repeat-x'></div>
repeat-x 水平平鋪圖片
repeat-y 垂直平鋪圖片
no-repeat 不平鋪圖片<div style='background-attachment:fixed'></div>
fixed 固定 不出現滾動條
scroll 出現滾動條
no 沒有滾動條<div style='background-size:50px 50px'></div><div style='background-origin:content-box'></div>
content-box 文本內容區域
padding-box 內邊距區域
border-box 外邊框區域<div style='background-clip:content-box'></div>
content-box 裁剪文本內容區域
padding-box 裁剪內邊距區域
border-box 裁剪外邊框區域這篇文章主要介紹了CSS樣式更改篇中的背景Background的基本設置，希望讓大家對CSS選擇器有個簡單的認識和了解。
****看完本文有收獲？請轉發分享給更多的人****
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/
信ID：WEB_wysj(點擊關注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
（頁底留言開放，歡迎來吐槽）
● ● ●
難題：直接設置一個半透明的邊框不起作用。
解決方案：padding-box盒模型border:10px solid rgba(255,255,255,.5);background: white;background-clip: padding-box;
背景知識:box-shadow 的基本用法
box-shadow: X軸偏移量 Y軸偏移量 [模糊半徑] [擴展半徑] [陰影顏色] [投影方式];
解決方案一：
利用box-shadow的屬性擴張半徑background:
yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
特點：box-shadow 方案只能模擬實線邊框，會貼合元素的圓角
解決方案二：outline 方案background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;特點：實現的“邊框”不會貼合元素的圓角，可以實現虛線邊框
示例：實現一個背景圖在div右下角，距離右邊10px 下邊10px 如圖;
解決方案一：background-position擴展方案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);兩個div很容易實現，那么一個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）
背景知識：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;
正確方案：做到無縫拼接(60度的條紋不好做)background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;
優化方案：重復漸變做60度條紋background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);height:100%;
案例六：靈活的同色系斜向條紋
在大多數情況下，我們想要的條紋圖案并不是由差異極大的幾種顏色組成的，這些顏色往往屬于同一色系。
失敗方案：沒有任何瀏覽器支持下面這個特性background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);正確方案：不再為每種條紋單獨指定顏色，而是把最深的顏色指定為背景色，同時把半透明白色的條紋疊加在背景色之上來得到淺色條紋background: #58a;background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);
背景知識：CSS 漸變，“條紋背景”
CSS3 圖案庫lea.verou.me/css3patterns
背景知識：CSS 漸變，“條紋背景”，“復雜的背景圖案”
大自然不會以“無縫”貼片的方式重復自己......
蟬原則：通過質數來增加隨機真實性
蟬漸變圖案：條紋圖案把不同尺寸的漸變圖案疊加起來，并使用質數來增加隨機的真實感
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%;
背景知識：CSS 漸變，基本的 border-image，“條紋背景”，基本的 CSS 動畫案例一：一個元素有一圈裝飾性的邊框，基本上就是一張圖片被裁剪進了邊框所在的方環區域。不僅如此，我們還希望這個元素的尺寸在擴大或縮小時，這幅圖片都可以自動延伸并覆蓋完整的邊框區域。
最簡單的辦法是使用兩個HTML 元素：一個元素用來把我們的石雕圖片設為背景，另一個元素用來存放內容，并設置純白背景，然后覆蓋在前者之上。問題來了：如果只用一個元素，我們能做到這個效果嗎？
解決方案：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;}案例四：邊框的裁切效果，用來模擬傳統的腳注
border-top: .2em solid transparent;border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);padding-top: 1em;
干貨！免費領取騰訊高級講師網頁設計教程
點我領取
???
關注網頁設計自學平臺，99%的努力都在這里
▼無法識別二維碼可以點「閱讀原文」噢！
們學習 CSS 背景屬性。
假設這里有個 div 容器，寬 400，高 300，默認情況下，這個 div 是沒有背景的，或者說它的背景是透明的，我們拿一張圖片實驗一下就能看得出來，這個 div 在默認情況下，背景是透明的。
也可以給 div 加一個背景顏色。
既然可以設置背景顏色，那么當然也可以給這個 div 設計一個背景圖片，就像這樣。但是由于這個 div 已經被我設定了大小，圖片呢，是大于這個容器的，所以實際上，我們最終看到的效果，是這個樣子的。我們只能看到圖片的一部分。下面我們就來看看應用 CSS 背景屬性如何實現這個效果。
創建一個 css-background.html 文件和一個 background-style.css 文件。接下來，我們打算給整個頁面來添加背景圖片。
事實上，body 元素也是一個容器，可以直接給 body 添加背景圖片。body 容器默認水平方向上，是占滿整個窗口的，我們來給它添加一個高度樣式，定義選擇器 body，聲明樣式 height: 100%。
CSS
body {
height: 100%;
}預覽一下效果，按下 F12，來觀察一下頁面 body 元素的大小，我們發現 body 依然是只有寬度，沒有高度。為什么我們設置的高度 100% 不管用呢？大家注意，這里的100%是相對于它的父元素高度的，body 元素的父元素是 html，這個元素我們并沒有給它設置大小。
所以，在 body 選擇器前面加一個 html 逗號 ( html, )，這樣兩個元素都設置了高度。讓他們的高度和瀏覽器窗口大小保持一致。
這時再來看一下頁面，現在 body 和整個窗口就一樣大了。
CSS
html, body {
height: 100%;
}下面我們給 body 添加背景圖片，可以通過 background-image 屬性實現，屬性值為 url 后跟一個小括號，括號里面填寫背景圖片的路徑 （url(./duck.gif)）。
回到樣式代碼，再定義一個 body 選擇器，單獨給它再聲明樣式 background-image: url(./duck.gif)。這個圖片是一個動態圖片。
我們來觀看一下效果，為什么會出現這么多的圖片呢？我明明只是加了一張背景圖而已。原因是，當我們給元素添加背景圖片的時候，圖片是以平鋪的方式來展現的。
什么是平鋪呢？就是當我們放入一張背景圖的時候，這個圖片在默認情況下，會向四周擴散，無限的進行重復，就變成了這個樣子。當然了，容器是有大小限制的，最終我們能看到的部分呢，也就這么多而已。
如果我們不希望這個背景圖是重復的，需要使用一個新的背景屬性 background-repeat，取值為 no-repeat。
我們來看效果，最終就只有一張動圖了。
接下來我們來修改一下，將背景圖片換成另外一張圖片。
再來觀察這個效果，由于不允許平鋪，我們只看到了一張圖片。
把 background-repeat 屬性值 no-repeat 改為 repeat。
我們就看到了這樣的效果。
在平時開發的時候，給一個網頁或一個比較大的容器設置背景，經常會采用這樣的技巧，放一個小的圖片進去，只需要讓它保持平鋪的方式，我就會得到一張無限大的圖。
再回到剛才的例子。如果要求這個背景圖片在頁面中間顯示，我們如何調整背景圖的位置呢？
我們需要使用 background-position 屬性，這個屬性需要寫兩個值：第一個值表示在水平方向上的對齊方式——left，center，right。第二個值表示在垂直方向上的對齊方式——top，center ，bottom。
給 body 添加樣式 background-position: center center，也就是水平垂直居中。
大家發現，圖片移到了頁面的中間。如果將圖片放到右下角，屬性值該如何設置呢？把答案寫到公屏上吧。
回到 html 代碼，添加一個 h1 元素和五個 p 元素，填入一些文本。再復制五份。
再回到 css 代碼，背景圖恢復為 bg.png，圖片平鋪方式為 repeat。
我們看一下效果，可以通過滾動條來查看網頁內容，仔細觀察，文字和背景圖片一起滾動。那能否實現文字滾動，背景圖片不動呢？大家可以先腦補一下效果。
實現這個效果，需要使用 background-attachment 屬性，用來聲明容器里的背景圖片與內容的依附方式。值 fixed：圖片固定，值 scroll：同時滾動。
給 body 選擇器添加樣式 background-attachment
[??t?t?m?nt] : fixed。
再看一下效果，滾動一下頁面，背景固定的效果實現了！
前面我們多次使用到了 background-color 屬性，它可以給容器設置背景顏色，值可以設置為顏色名稱，十六進制顏色值，RGB顏色值等等。
把背景圖片的樣式注釋掉，添加 background-color 屬性，值為 green。
此時，整個頁面背景為綠色！顏色有點深，可以讓綠色變的淺一些嗎？
你能想到的方法應該是換一個其他的顏色值，其實，我們可以通過讓背景透明一些，同樣可以實現這個效果。
這需要學習一個新的顏色值表示方法——rgba。這里的 rgb 就是 rgb 顏色值，a 是 alpha 的簡寫，表示通過設置一個 alpha 通道，來指定顏色的不透明度，是一個介于 0 到 1 的數字。0表示完全透明，1 表示完全不透明。比如 rgba(0, 0, 0, 0.5)，表示的顏色就是黑色半透明。
把 green 顏色名稱改為 rgba(0, 255, 0, 0.1)。
我們看，頁面綠色的背景因為透明，顏色變淺了！
為了縮短代碼，也可以使用單一的 background 來指定所有的背景屬性。
可以把 body 的全部背景屬性，合并在一個 background 屬性里。注釋所有代碼，聲明屬性 background，值可以寫為：顏色值 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;）
我們看，一句聲明，實現了全部的背景效果！
文章配套視頻鏈接： https://www.bilibili.com/video/BV1oU4y1278g/?p=75
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
