首先回顧一下上一篇中的最后效果展示

現在我們繼續往后做

首先看一下最終效果圖

先來做一個背景圖吧

第一步：

下載原圖（或者可以自己設置想要的背景圖）

在resume文件夾中創建一個新的文件夾img，專門用來存放需要用到的圖片，將背景圖先放進去。（這里我是用了一個自己喜歡的壁紙 命名為tree.jpg）

先使用CSS樣式表來嘗試一下

<div class="banner" style="background-image: url(./img/tree.jpg)"></div>

運行之后發現頁面沒有任何變化

為什么呢？

這里用到一個調試大法

給標簽加一個邊框

<div class="banner" style="background-image: url(./img/tree.jpg);border: 1px solid red;">

運行后可以看到導航欄下面多了一條紅色邊框線

這就證明這個圖像的高度為0，于是試著給它加一個高度

.banner{height: 100px;}

可以看到圖片出來了一部分了

這里就涉及到了一個CSS中的重點

• 塊級元素 div 高度由其內部文檔流元素的高度總和決定
• 文檔流：文檔內元素的流動方向
• 內聯元素從左往右流動，如果流動遇到阻礙，則換行繼續流動（<span>）
• 塊級元素每一個塊都占一行，從上往下流動（<div>）
• 如果一個中文<span>有border在流動過程中被截斷，border不會出現兩個，依舊是一個
• 如果一個英文<span>有border在流動過程中遇阻，卻不會截斷（可以用一個CSS屬性改變 word-break：break-all【全部打斷】break-word【只有在單詞分隔的地方可以打斷-默認值】）
• 如果想讓塊級元素也可以從左往右流動，那就使用“浮動”

既然講了塊級元素，那么內聯元素呢，這個非常非常復雜，如果感興趣，可以點以下的鏈接去了解一下

方應杭：深入理解 CSS：字體度量、line-height 和 vertical-align?zhuanlan.zhihu.com

接下來繼續背景圖制作

現在定義的圖片高度只有100px，肯定是顯示不全的，我們已經知道了 div 的高度是由其文檔流的高度總和決定，但導航欄后面都是空白，其高度不足以放下整個背景圖，怎么辦呢，只能迫不得已給其指定一個特定高度（迫不得已使用，最好不要使用，否則必定會出現bug）

發現還是與原網站有所不同，那怎么樣讓導航欄和背景圖重疊呢，先來介紹一個最簡單的方法，讓導航欄脫離文檔流，讓其固定在頁面上，相對于窗口定位

.topNavBar{position: fixed;top: 0;left: 0;}

運行刷新

導航欄與背景圖成功重疊，但是為什么導航欄的logo和內容縮在了一起？

我們可以這樣解決

.topNavBar{ width: 100%;}

運行刷新

好，分隔開了，但是又出現bug了，導航欄右側的內容已經貼邊了，很影響美觀

怎么解決呢

在整個導航欄外面再加一個div專門用來做一個邊距

<div class="topNavBar-inner">

先將導航欄的左右外邊距刪掉，并賦予給"inner"

刷新之后發現又出現bug了

我的浮動呢？？？

由于新添加了一個div，原來的浮動已經失效了，需要重新整理標簽

將clearfix移到新的父系標簽"inner"中，再將所有CSS屬性中的".topNavBar>div"指向符號刪掉即可，重新刷新

可喜可賀，恢復了正常

接下來繼續

觀察原圖可以看出，它是一個黑色半透明的樣式

所以需要以下幾步

①<div class="banner"> <div class="mask"></div> </div> ②.banner .mask{height: 515px;background-color: rgba(0, 0, 0, 0.5);}（意為半透明遮擋）

可以看出明顯的半透明黑色遮擋

這個時候還是不一樣，因為原圖中的圖片是居中顯示，現在明顯沒有把圖片展示完整，于是

.banner{ background-position: center center;}

接下來再給圖片加一個自適應大小

.banner{ background-size: cover;}

意思就是會展示所有的圖片并按照網頁比例縮放

OK，導航欄這一大部分就算是完成了，接下來做這一部分

第二步：

但目前我的頁面是這樣的

先給其加一個邊框（所謂的調試大法）

.userCard{ border: 1px solid red;}

經測量，原網站中的卡片寬度為940px，于是這里設置一個寬度值

.userCard{ max-width: 940px;}

有人會問了，為什么不直接設置width呢？

也就是max-width和width有什么區別呢？

當網頁的寬度拖動到小于940px時，max-width會自適應寬度，而width只能向右滑動才可以看全頁面，而當網頁寬度大于940px時，兩者表現相同

然后給其設置一個水平居中

.userCard{ margin-left: auto;margin-right: auto;}

于是整個卡片在頁面水平居中

接著將頭像鏈接過來（同樣存放在img文件夾中，這里我用的是最近超愛的戰斗天使）保持與原圖大小相同，指定一個寬高

<img src="./img/alita.jpg" width=296px height=343px alt="頭像">

于是就引用成功啦，接下來完成Hello部分

首先取色，測量卡片框的寬高，這時候需要注意的一點是，由于是<span>標簽，設一個寬高的固定值并不可取，于是先將其轉變為塊級元素，在設置其內邊距

.userCard .welcome{color: white;background-color: #E8676B;display: inline-block;padding: 4px 14.5px;line-height: 21px; /* 在不同瀏覽器里表現不同，盡量寫一下 */ }

這時候發現原圖卡片左下角還有一個小三角形，可以參考以下鏈接

無情老油條：CSS-畫一個三角形?zhuanlan.zhihu.com

做好三角形之后，先再寫一個標簽放進Hello里

<span class="triangle"></span>

然后將小三角形的CSS屬性添加

.userCard .welcome .triangle{display: block;border: 8px solid transparent;width: 0;border-left-color: #E6686A;border-top-width: 0; }

運行后發現，怎么和說好的不一樣呢，不僅沒有看到小三角，卡片仿佛還變大了一點

是因為<span>標簽默認會包住<span>標簽

現在需要讓小三角形脫離文檔流

那么這里就要用的另一個定位方式：絕對定位

令三角形的<span>標簽相對于Hello的<span>標簽進行絕對定位

只需要做兩步

①子元素上寫position: absolute; ②父元素上寫position: relative;

然后調整一下三角形的位置

top: 100%;/* 即三角形的上邊緣距卡片的上邊緣高度100% */ left: 5px;/* 向右挪動5px */

完成

然后繼續調整，如何將頭像和內容橫向排列呢

沒錯 “浮動”

①子元素 float: left; ②父元素 class=" clearfix" ③偽元素.clearfix::after {content: '';display: block;clear: both;}

觀察到兩側有空白部分，則給<div>標簽加一個外邊距

.userCard .pictureAndtext{padding: 50px;}

再給中間加一個邊距

margin-left: 65px;

發現那條分隔線好像不夠長

沒有辦法只能指定一個寬度

width: 471px;

由于每一個標簽都有其默認樣式，此時寫入

*{margin: 0;padding: 0;}

將所有樣式的默認內外邊距刪掉，對照著原網站慢慢調整

調整字體間的間距

改變<hr>的樣式

hr{height: 0;border: none;border-top: 1px solid #DEDEDE;}

增加<hr>邊距

.userCard .text hr{margin: 22px 0;}

現在來做下面的效果

怎么分兩行顯示呢

試著用一下“浮動”

結果發現它們都同行顯示，所以利用它們可以自動換行的特性來做一下調整

.userCard dl dt, .userCard dl dd {float: left;padding: 8px 0; }.userCard dl dt {width: 30%;font-weight: bold; }.userCard dl dd {width: 70%;color: #9DA0A7; }

OK 卡片的上半部分算是完成了

再來看下半部分

首先要掌握怎樣去引用圖標

推薦下面這個鏈接

無情老油條：阿里巴巴矢量圖標庫的使用?zhuanlan.zhihu.com

按照步驟做完后 即引用成功

現在繼續調整樣式

.userCard svg{width: 30px;height: 30px;fill: white;/* JS中的顏色設置方式 */vertical-align: top; /* 設置垂直對齊方式 */ }

對圖標的樣式做一個調整

.userCard>footer.media{ background-color: #E8676B; text-align: center; }

對內容進行一個居中設置

原網站中鼠標懸停時有一個深色的圓浮現

來試著做一下這個效果

先給<a>標簽設一個邊框

.userCard>footer.media>a{ border: 1px white solid;}

發現邊框并沒有包住圖標，于是添加

display: inline-block;

做一點空隙出來

width: 50px; line-height: 20px; padding: 15px 0;/* 直接設置高度非常容易出bug */ margin: 10px 20px;

ok 最后調整為圓形

border-radius: 50%;

去原網站上取色

F12 找到&lt;a&gt;標簽 點擊右邊的:hov 勾選:hover 強制進行鼠標懸停 然后取色

.userCard>footer.media>a:hover {background: #D05C60; }

完成

效果如圖

結合上一節的

最終整體效果

就很棒~

總結

以上是生活随笔為你收集整理的css 背景图怎么设置自动填充满_CSS-布局与定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。