在CSS中使用background屬性，調整頁面和塊

在CSS中使用background屬性，調整頁面和塊背景，系統講解背景屬性

望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

【技術等級】初級
【承接文章】《圖片在容器中產生的底部間隔，CSS可以巧妙解決，前端原理很重要》

本文重點講解利用CSS技術設置HTML元素的背景，包括背景顏色和背景圖片，這樣可以讓你的頁面更加美觀。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

背景屬性是指可以為HTML中的頁面、塊級元素、內聯元素等設置背景外觀的效果。這里一定要注意，背景屬性并不是只能為頁面背景設置的，也可以為HTML文檔中任意元素設置背景的。這一組CSS屬性包括以下幾個：

background-color
background-image
background-repeat
background-position
background-attachment

一、設置背景顏色：

CSS利用 background-color 屬性設置元素的背景顏色

該屬性有多種取值：

十六進制顏色代碼，例如：background-color:#ff0000。
十進制顏色代碼，例如：background-color:rgb(255,0,0)。
帶有透明度通道的十進制顏色代碼，例如：background-color:rgba(255,0,0,0.3)。
顏色英文單詞，例如：background-color:red。
顏色三要素模式代碼，例如：background-color:hsl(0,100,100)。
帶有透明度通道的顏色三要素模式代碼，background-color:hsla(0,100,100,0.3)。

上述取值較為常用的是“十六進制顏色代碼”、“帶有透明度通道的十進制顏色代碼”和“顏色英文單詞”。下面列舉幾個代碼實例。

p{background-color:#ff0000;} //設置段落的背景為紅色
body{background-color:#cccccc;} //設置整個文檔的背景為灰色

二、設置背景圖片：

CSS利用 background-image 屬性設置元素的背景圖片

該屬性的取值格式如下所示：

background-image:url(Image_URL);

該屬性需要在 url() 中指定一個圖片的路徑和文件名，代碼示例如下所示。

body{background-image:url(images/back.jpg);

上述代碼設置整個頁面的背景圖片為images文件夾下的名為back.jpg的圖片文件

三、設置背景圖片的重復平鋪方式：

CSS利用 background-repeat 屬性設置背景圖片的平鋪方式

該屬性有多種取值：

repeat，默認值，背景圖片平鋪。
no-repeat，背景圖片不平鋪。
repeat-x，背景圖片水平平鋪。
repeat-y，背景圖片垂直平鋪。

注意：該屬性必須結合 background-image 屬性共同使用。

四、設置背景圖片出現的位置：

CSS利用 background-position 屬性設置背景圖片出現的位置

1、可以取值為特定的單詞組合。

該種取值可以選取以下幾種對齊方式：

水平方向：left（左對齊）、right（右對齊）。
垂直方向：top（頂對齊）、bottom（底對齊）。
居中對齊：center。

上述對齊方式拼湊起來，可以下列形成9種取值方式：

top left, 背景圖片頂部居左，位于頁面的左上角。
top center, 背景圖片頂部居中，位于頁面的上方。
top right, 背景圖片頂部居右，位于頁面的右上角。
center left, 背景圖片中部居左，位于頁面的中部左側。
center center, 背景圖片中部居中，位于頁面的正中心。
center right, 背景圖片中部居右，位于頁面的中部右側。
bottom left, 背景圖片底部居左，位于頁面的右下角。
bottom center, 背景圖片底部居中，位于頁面的下方。
bottom right, 背景圖片底部居右，位于頁面的右下角。

注意：若只選取一個對齊方式，則第二個默認為center。

2、可以取值為帶有單位的固定坐標值：

格式：background-position:x y;
例如：background-position:100px 300px;

3、以百分比為單位的坐標值：

格式：background-position:x% y%;
例如：background-position:20% 15%;

注意：該屬性的使用必須同時具備下列兩個條件。

具備background-image屬性，也就是必須帶有背景圖片。
background-repeat屬性不能取值為repeat，也就是背景圖片不平鋪。

五、設置背景圖片是否固定或隨著頁面的其余部分滾動：

該屬性有多種取值：

scroll，默認值，背景圖片隨頁面的其余部分滾動。
fixed，背景圖片固定。

文章預告

下一篇文章中，小海老師會以本篇文章講述的幾個屬性來帶領大家實踐一些實例。對于渴望在前端開發道路上前進的你一定不能錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上也已經寫了有七八篇文章了。這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

在前面

今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風，趕緊起來把文章寫完。

這篇文章比較基礎，在國慶期間的業余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。

自測讀不讀

以下是本文所涉及到的知識點，break or continue ?

文件上傳原理
最原始的文件上傳
使用 koa2 作為服務端寫一個文件上傳接口
單文件上傳和上傳進度
多文件上傳和上傳進度
拖拽上傳
剪貼板上傳
大文件上傳之分片上傳
大文件上傳之斷點續傳
node 端文件上傳

原理概述

原理很簡單，就是根據 http 協議的規范和定義，完成請求消息體的封裝和消息體的解析，然后將二進制內容保存到文件。

我們都知道如果要上傳一個文件，需要把 form 標簽的enctype設置為multipart/form-data,同時method必須為post方法。

那么multipart/form-data表示什么呢？

multipart互聯網上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。

multipart/form-data 結構

看下 http 請求的消息體

請求頭：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件，其中boundary表示分隔符，如果要上傳多個表單項，就要使用boundary分割，每個表單項由———XXX開始，以———XXX結尾。

消息體- Form Data 部分

每一個表單項又由Content-Type和Content-Disposition組成。

Content-Disposition: form-data 為固定值，表示一個表單元素，name 表示表單元素的名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進制內容。

Content-Type：表示當前的內容的 MIME 類型，是圖片還是文本還是二進制數據。

解析

客戶端發送請求到服務器后，服務器會收到請求的消息體，然后對消息體進行解析，解析出哪是普通表單哪些是附件。

可能大家馬上能想到通過正則或者字符串處理分割出內容，不過這樣是行不通的，二進制buffer轉化為string,對字符串進行截取后，其索引和字符串是不一致的，所以結果就不會正確，除非上傳的就是字符串。

不過一般情況下不需要自行解析，目前已經有很成熟的三方庫可以使用。

至于如何解析，這個也會占用很大篇幅，后面的文章在詳細說。

最原始的文件上傳

使用 form 表單上傳文件

在 ie時代，如果實現一個無刷新的文件上傳那可是費老勁了，大部分都是用 iframe 來實現局部刷新或者使用 flash 插件來搞定，在那個時代 ie 就是最好用的瀏覽器（別無選擇）。

DEMO

這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗很差，導致頁面刷新，頁面其他數據丟失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        選擇文件:
            <input type="file" name="f1"/> input 必須設置 name 屬性，否則數據無法發送<br/>
<br/>
            標題：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 傳</button>

</form>

復制代碼

文件上傳接口

服務端文件的保存基于現有的庫koa-body結合 koa2實現服務端文件的保存和數據的返回。

在項目開發中，文件上傳本身和業務無關，代碼基本上都可通用。

在這里我們使用koa-body庫來實現解析和文件的保存。

koa-body 會自動保存文件到系統臨時目錄下，也可以指定保存的文件路徑。

然后在后續中間件內得到已保存的文件的信息，再做二次處理。

ctx.request.files.f1 得到文件信息，f1為input file 標簽的 name
獲得文件的擴展名，重命名文件

NODE

/**
 * 服務入口
 */
var http=require('http');
var koaStatic=require('koa-static');
var path=require('path');
var koaBody=require('koa-body');//文件保存庫
var fs=require('fs');
var Koa=require('koa2');

var app=new Koa();
var port=process.env.PORT || '8100';

var uploadHost=`http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //設置文件的默認保存目錄，不設置則保存在系統臨時目錄下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 開啟文件上傳，默認是關閉
}));

//開啟靜態文件訪問
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次處理，修改名稱
app.use((ctx)=> {
    var file=ctx.request.files.f1;//得道文件對象
    var path=file.path;
    var fname=file.name;//原文件名稱
    var nextPath=path+fname;
    if(file.size>0 && path){
        //得到擴展名
        var extArr=fname.split('.');
        var ext=extArr[extArr.length-1];
        var nextPath=path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式輸出上傳文件地址
    ctx.body=`{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server=http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
復制代碼

CODE

https://github.com/Bigerfe/fe-learn-code/

在線咨詢

上一篇：神級工具網站，大學生行走江湖之必備利器
下一篇：分塊之難：RAG應用中的Chunking技術解析

您的項目需求

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

整合營銷服務商

在CSS中使用background屬性，調整頁面和塊

文章預告

小海教材

小海聲明

在前面

自測讀不讀

原理概述

最原始的文件上傳

文件上傳接口

您的項目需求