CSS必知|重點屬性background|實踐技巧|溫故知新

學海無涯，不要沉浸在知識的海洋裏，迷失本身。css

要知道本身想要什麼，抓住重點，不忘初心。html

這個世界上百分之20的人，掌握着百分之80的財富。面試

接下來一系列教程，就帶領你們抓住重點，一塊兒作那百分之20的人。markdown

往期知識點回顧：佈局

重點屬性background

CSS 背景這裏指經過background對對象設置背景屬性，如經過CSS設置背景各類樣式。

background-color

設置顏色做爲對象背景顏色

background-image

設置圖片做爲背景圖片

background-repeat

設置背景平鋪重複方向

background-attachment

設置或檢索背景圖像是隨對象內容滾動仍是固定的。

background-position

設置或檢索對象的背景圖像位置。

Background

背景樣式的值是複合屬性值組合，也就是背景單詞的值能夠跟多個屬性值，值與值之間使用一個空格間隔連接上便可。

background背景做用：

一、設置純色背景。背景background能夠設置對象純色的背景顏色，

二、設置圖爲背景。能夠設置對象背景爲圖片，若是背景是圖片可讓圖片重複平鋪橫鋪，或將圖片做爲對象背景固定在對象任何位置。

Background分析解析

A.設置背景具體顏色值

B.這是背景的具體圖片路徑

C.設置圖片是否平鋪

no-repeat:不重複

repeat-x:水平方向（橫向）重複平鋪

repeat-y:垂直方向（豎向）重複平鋪

若是不設置，爲全背景平鋪

D.具體左右上下的距離

left 圖片靠左

right 圖片靠右

top 圖片靠上

bottom 圖片靠下

E.背景圖片固定，仍是隨上下滾動條滾動

fixed 圖片固定

scroll 背景圖片內容滾動

代碼實踐

<!DOCTYPE html>
<html lang="en">
<head>    
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
   <meta http-equiv="X-UA-Compatible" content="ie=edge">  
   <title>flex佈局css</title>   
   <style>       
       .container{     
            background: #FFF url(https://image.baidu.com/beijing.gif) no-repeat 0 0 fixed    
       }    
   </style>
</head>
<body>  
   <div class="container">     
   背景圖    
   </div>
</body>
</html>
複製代碼

面試題：

CSS沒法顯示背景顏色問題分析解決

一、由使用float浮動形成浮動產生沒法顯示css背景顏色

二、高度不夠而產生背景沒法顯示

3.若是是float形成：解決方法有三種，一個是設置clear清除浮動、設置css高度、設置css overflow樣式。

4.若是是高度緣由：解決方案以下，設置夠高的高度，或取消刪除高度樣式便可。