整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
如果網頁只有一種顏色，那是非常可怕的，顏色的設置豐富了網頁，就如同多彩繽紛的世界。
在了解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鏈接樣式
背景色寫法：background-color:顏色;
background-color:顏色;為窗口設置背景色:
body {
background-color: chartreuse;
}效果：
刀PPT提供免費PPT模板，簡潔綠色立體樹木背景的綠色環保PPT模板，模板是設計好的PPT模板直接打開編輯即可。
頁數：31頁
編號：PPT17142
大小：922KB
軟件：PowerPoint
格式：PPTX
比例：16:9
復制下載：101dao.com/ppt/ppt-PPT17142.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
