整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
CSS 中，要讓背景圖片在不拉伸變形的前提下盡可能占滿容器，同時不留空余部分（即保持圖片的縱橫比并且填充整個容器），可以使用 background-size 屬性，并設置為 cover。
如果網頁只有一種顏色，那是非常可怕的，顏色的設置豐富了網頁，就如同多彩繽紛的世界。
在了解css顏色之前，我們回顧下計算機是如何顯示顏色的？計算機根據色光三原色的原理通過各種算法來顯示顏色。
網頁中使用顏色關鍵字、16進制字符、rgb、rgba等表示紅，綠，藍三種顏色混合色，如下示例,幾種寫法都是指同一個顏色（紅色）：
color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)對于16進制形式，每2位表示一個顏色，從左到右分別是紅、綠、藍，每種顏色取值從00 到 FF。
如下示例：
color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍色*/對于rgb的表示法，由三個參數組成，分別是紅、綠、藍，每種顏色取值從0 到 255。
如下示例：
color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*紅色*/
color: rgb(0,255,0); /*綠色*/
color: rgb(0,0,255); /*藍色*/紅，綠，藍值從0到255的結合，給出了總額超過1600多萬不同的顏色（256 × 256 ×256）。
但是現代大多數顯示器能夠顯示至少16384種顏色。所以在使用顏色時要格外注意，避免設置不能夠顯示的顏色，可以參考網頁安全色：https://www.w3school.com.cn/cssref/css_colors.asp。
顏色除了有三原色紅綠藍組成，還有亮度層級，如下圖：
rgba 中的a是指透明度，這個是css3新增加的屬性，通過rgba可以設置更加漂亮的顏色。
通過background屬性可以設置元素的背景色、背景圖片，語法如下：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;background 在一個聲明中設置所有的背景屬性，可以在這里設置如下屬性：
各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個值。
建議使用background 簡寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當然你也可以分開使用，比如：
background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;1、背景顏色 —— background-color
background-color 和之前講的的color 一樣，可以使用16進制、rgb、rgba等設置顏色。如下實例：
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>如下圖顯示：
注意：background-color: transparent; 指透明色，不顯示任何顏色。
2、背景圖片的使用——background-image
給html元素添加背景圖片，在早期網頁制作中被廣泛應用，如今已不建議大量使用。如下實例：
body {background-image:url(/static/bg.gif);}這里使用了一個125*125大小的圖片，如下：
但是你會發現，整個網頁鋪滿了圖片，上面的代碼默認會鋪滿整個頁面從左到右，從上到下 。如果不想被平鋪，可以使用background-repeat 設置。
背景圖片同時可以設置多個背景圖片，如下：
background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);多個圖像以逗號隔開，在頁面中多個圖片會疊加顯示，第一張圖片顯示在最頂端。
如下效果：
3、背景重復方式 —— background-repeat
它有如下幾個屬性：
repeat | 默認。背景圖像將在垂直方向和水平方向重復。 |
repeat-x | 背景圖像將在水平方向重復。 |
repeat-y | 背景圖像將在垂直方向重復。 |
no-repeat | 背景圖像不重復。 |
inherit | 從父元素繼承 background-repeat 屬性的設置。 |
實例如下：
4、背景圖的位置 —— background-position
背景圖片默認顯示在左上角，語法如下：
background-position: x y; // x 距離左邊距離，y距離頂部距離如果要改變它的位置，可以使用關鍵字：top、bottom、left、right 和 center；或者使用長度值，如 100px 或 5cm；也可以使用百分數值。
x 可以取值 百分比| 數值| left | center | right。
y 可以取值 百分比| 數值| top| center | bottom。
當只設置一個值的時候，另一個會缺省為 center。
使用關鍵字，將背景圖片水平居中，垂直居中：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 使用百分比%：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%; 50% 50% 等同于 center center，顯示效果和上圖一樣。
還可以使用具體數值，比如 px、em、cm等。
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px; 顯示效果如下：
5、背景圖相對于容器的基準點 —— background-origin
就是設置背景圖片相對于html元素什么位置作為初始坐標點，語法：
background-origin: padding-box|border-box|content-box;幾種值得含義：
padding-box | 背景圖像相對填充框的位置 |
border-box | 背景圖像相對邊界框的位置 |
content-box | 背景圖像相對內容框的位置 |
如下實例：
6、背景圖片大小 —— background-size
默認會顯示背景圖原始尺寸，可以通過此屬性設置背景圖片在元素上的大小，語法：
background-size: width height;寬度和高度可以使用 數值、百分比%、cover 及 contain ;
數值：可以使用任何單位的數字，比如 px、em、cm等。如果設置一個值，第二個為"auto(自動)"。
百分比%：相對于其所在html原始寬度和高度，如果設置一個值，第二個為"auto(自動)"。
cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain：把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
如下示例：
7、背景圖像是否固定或者隨著頁面的其余部分滾動
background-attachment 屬性有以下幾個值：
scroll | 背景圖片隨頁面的其余部分滾動。這是默認 |
fixed | 背景圖像是固定的 |
inherit | 指定background-attachment的設置應該從父元素繼承 |
local | 背景圖片隨滾動元素滾動 |
如設置一個固定的背景圖片，不跟隨頁面滾動：
background-attachment:fixed;滾動滾動條，會發下背景圖片始終固定在屏幕那個位置。
8、背景繪制區域 —— background-clip
語法如下：
background-clip: border-box|padding-box|content-box;border-box | 默認值。背景繪制在邊框方框內（剪切成邊框方框）。 |
padding-box | 背景繪制在襯距方框內（剪切成襯距方框）。 |
content-box | 背景繪制在內容方框內（剪切成內容方框）。 |
這個屬性類似于 background-origin ，只不過它會裁剪背景圖片，如下示例：
9、背景層的混合模式 —— background-blend-mode
所謂混合模式就是將圖片與顏色或圖片與圖片進行混合，語法：
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;屬性值：
示例如下：
正常模式
luminosity 亮度模式
color 顏色模式
其它模式可以自己試試，看下有什么區別。
到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡寫也可以分開寫，要想完全掌握，還得多練習，每種屬性進行組合使用看看其效果。
一般建議使用 background 簡寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯誤，并補充。
上篇：前端入門——css鏈接樣式
們學習 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小時內與您取得聯系。
