零基礎教你學前端-72 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

眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數據區塊鏈測試 PPT JS(40g+300教程) HTML 簡歷領取相關學習資料！

一、HTML

1、<image>標簽上title屬性與alt屬性的區別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》

2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體

加粗：<b>、<strong>

下標：<sub>

居中：<center>

字體：<font>、<basefont>、參考《HTML標簽列表》

3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景

section：定義文檔中的一個章節

nav：定義只包含導航鏈接的章節

header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。

參考《HTML5 標簽列表》

4、請說說你對標簽語義化的理解？

a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

聲明位于文檔中的最前面，處于標簽之前。告知瀏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

6、你知道多少種Doctype文檔類型？

標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，

Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

7、HTML與XHTML——二者有什么區別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關閉。

c. 標簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失

h. sessionStorage 的數據在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產生負面影響的元素：frame，frameset，noframes；

9、iframe的優缺點？

優點：

a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通信

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 無法被一些搜索引擎索引到

c. 頁面會增加服務器的http請求

d. 會產生很多頁面，不容易管理。

參考《iframe的一些記錄》

10、Quirks模式是什么？它和Standards模式有什么區別？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：總體會有布局、樣式解析和腳本執行三個方面的區別。

a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

11、請闡述table的缺點

a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。

e. 不夠語義

參考《為什么說table表格布局不好？》

12、簡述一下src與href的區別

src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置

href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接

公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數據區塊鏈測試 PPT JS HTML 簡歷領取相關學習資料！

、跳出新頁面：

<basetarget=”_blank”>target="_self"不跳轉

<form action="xxx.htm" target="_blank">form表單提交的跳轉設置

2、點擊按鈕跳出別的頁面添加

onclick="return false"

3、display:block;塊級元素，也就是說它可以設置一些寬高，獨占一行，比如，div元素，p元素等display:inline-block,行級元素，也就說它可以使得同樣設置成行級元素的元素一起在一行，然后可以設置寬高，這個適應于制作一個導航菜單，將每個菜單項設置成行級元素。它的寬和高默認是內容的寬和高,典型的元素是表單類的元素。dispaly:inline.行級元素，不可設置寬和高，默認寬高是內容的寬和高，典型的比如，span,

4、html鼠標小手：

cursor:pointer;

5、html背景圖屬性：

background-size:100%;，但是你的圖片寬度，高度要設置成100% ，要注意的是.php的文件里面這個background-image:url();不好用，失效，你要使用網站的絕對路徑background:url('/20151106/404/image/404.png') no-repeat 4px 5px;}background:url("11111.jpg");background-repeat:no-repeat;background-size:100%;width:100%;height:100%;

這個是給頁面加背景的body{padding: 0px;margin: 0px;background-color:#494949;width:100%;height:100%;}.

還有在設置背景圖片的時候可以使用背景background-image:url("");這個屬性來設置背景，但是圖片要用gif的格式

6、按輸出方式來顯示文本格式:<pre></pre>橫線:<hr /><q></q>雙引號標簽下劃線<ins></ins>

7、html---position/relative/absolute/fixed/三種布局定位方式的總結relative是按照自身來說，absolute是按照瀏覽器來說，但是要注意的是，如果他有父級元素的話，那么他就是依照父級元素來進行改變位置的。

8、無序列表去掉前面黑點li{list-style:none;}

9、隱藏元素 - display:none或visibility:hidden

display-這個元素，設置之后原本的元素不會占用當前的空間，不會影響布局，但是后者，隱藏之后還會占用空間

10、HTML隱藏多余

Div{overflow:hidden}

10、隱藏自適應：overflow:auto;

11、關于框架的問題

這個是接受你要顯示頁面

indx.php是框架顯示的頁面，最上面，也就是沒按鍵顯示

這個是你點擊之后想在哪顯示后面加：target=""

12、關于背景的高的問題，也就是說你定義了一個div但是沒有搞，是為了讓你的圖片在上面。那么就有這個屬性了

overflow:hidden;

也就是你本身是屬于父級元素的，但是你float就脫離了文本，變成浮動的，所有就不會在用父子元素的空間，所以就父級加上這個overflow:hidden;

13、錨點的設置

在你想跳轉的頁面的地方加上：<a name="miao">

然后在你想加鏈接的地方加上<a href="#miao">去找錨點</a>

14.點擊換驗證碼圖片

15、圓角

border-radius:5px;

16、textarea的左側文字在最左邊

style="vertical-align:top"

17、html塊狀元素和內聯元素的總結，塊狀元素可以設置margin，但是使用margin的時候要符合：1.塊狀元素，2.有寬高，其中內聯元素不能設置margin和寬高的屬性，只能設置padding

在線咨詢

上一篇：分享一個用canvas寫的生日祝福動畫，漫天煙火給你，你的感動給我
下一篇：前端入門-css顏色和背景

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

零基礎教你學前端-72 CSS背景

您的項目需求