CSS背景樣式

時間 2019-12-04

標籤 css 背景樣式欄目 CSS 简体版

原文原文鏈接

CSS是級聯樣式表，用來表現HTML等文件樣式的語言，CSS可以真正作到網頁的表現與內容分離的設計語言，也就是說，作好了一款網頁，能夠經過另外一個後綴名是css的文件進行修改其中的樣式，不過在html的<head>標籤中，須要使用<link>標籤來調用css樣式表。css

CSS背景

CSS容許應用純色做爲背景，也容許使用背景圖像建立至關複雜的效果，下表是CSS關於背景的一些屬性html

屬性	描述
background-color	設置元素的背景眼睛
background-image url()	把圖片設置爲背景
background-repeat	設置背景圖片是否及若是重複
background-position	設置背景圖片的起始位置
backgroud-attachment	背景圖像是否固定或者隨着頁面的其他部分滾動

先建立一個測試用的html，而後用css修改它的背景效果瀏覽器

（注：css樣式與html要在同一目錄下，不然就須要href屬性就要設置調用css的路徑）佈局

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!-- 調用css文件，href是css的路徑+文件名，沒有填路徑表明css與html在同一目錄下 -->
        <link rel="stylesheet" type="text/css" href="CssStyle.css">
    </head>
    <body>

    </body>
</html>

而後能夠建立css樣式表來修改html了測試

background-colorurl

body{
    /*修改body背景顏色*/
    background-color: #7DBBDA;
}

background-image url(圖片路徑):spa

body{
    /*修改body背景顏色*/
    background-color: #7DBBDA;
    /*在body中增長圖片*/
    background-image: url("bt.png");
}

添加圖片後，發現圖片會鋪滿整個頁面，因此還能夠設置background-repeat的屬性no-repeat，來使其圖片不要重複設計

background-repeat: no-repeat3d

body{
    /*修改body背景顏色*/
    background-color: #7DBBDA;
    /*在body中增長圖片*/
    background-image: url("bt.png");
    /*設置圖片不要重複*/
    background-repeat: no-repeat;
}

固然也能夠設置重複x軸，或者重複y，這樣有個好處就是能夠用很小的圖片，而後經過重複x軸，讓他變成頁面的標題。這樣用戶在訪問這個頁面時會很是的快。由於用戶訪問頁面時，計算機會下載資源，而後解析顯示出來給用戶看。若是下載資源的東西小了。頁面顯示的速度就會很是快。就像1G須要幾個小時，而1K下載不到0.1秒code

background-repeat: repeat-x;

background-repeat: repeat-y;

body{
    /*修改body背景顏色*/
    background-color: #7DBBDA;
    /*在body中增長圖片*/
    background-image: url("bt.png");
    /*設置圖片只重複x軸*/
    background-repeat: repeat-x;
}

background-position;

這個是用來設置圖片的初始位置，能夠直接填寫x,y軸的座標。也能夠填寫right、left、center來佈局位置，不過在使用right時，須要經過top來固定頂點，要麼圖片默認會上下居中的。

body{
    /*修改body背景顏色*/
    background-color: #7DBBDA;
    /*在body中增長圖片*/
    background-image: url("bt.png");
    /*設置圖片不重複*/
    background-repeat: no-repeat;
    /*設置圖片的初始位置*/
    background-position: right;
}

上圖就是沒有設置top，致使圖片的y軸默認是center的，如今來設置top

body{
    /*修改body背景顏色*/
    background-color: #7DBBDA;
    /*在body中增長圖片*/
    background-image: url("bt.png");
    /*設置圖片不重複*/
    background-repeat: no-repeat;
    /*設置圖片的初始位置*/
    background-position: right top;
}

能夠發現，圖片長了很多。。。個人這個圖片過小了，看起來效果不那麼明顯，若是是一張照片，就會看到，在沒有設置top的時候，圖片的靠右，而且上下居中的，致使圖片縮進了瀏覽器邊緣，沒有顯示全

backgroud-attachment

這個是將圖片固定在頁面上，當你文章很長的時候，你拖動滾動條，圖片不會由於滾動條而消失

把html文件的body中，多加點空格，來讓滾動條出現

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!-- 調用css文件，href是css的路徑+文件名，沒有填路徑表明css與html在同一目錄下 -->
        <link rel="stylesheet" type="text/css" href="CssStyle.css">
    </head>
    <body>
    <br /><h1>測試用的數據</h1><br /><br /><br /><br /><br /><h2>測試用的數據</h2><br /><h2>測試用的數據</h2><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h1>測試用的數據</h1><br /><br /><br /><br /><br /><br /><h2>測試用的數據</h2><br /><br /><br /><br /><br /><h2>測試用的數據</h2><br /><br /><br /><br /><br /><br /><br /><br /><h2>測試用的數據</h2><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h2>測試用的數據</h2><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </body>
</html>

來設置backgroud-attachment，使圖片固定

body{
    /*修改body背景顏色*/
    background-color: #7DBBDA;
    /*在body中增長圖片*/
    background-image: url("bt.png");
    /*設置圖片只重複x軸*/
    background-repeat: repeat-x;
    /*設置圖片固定，不會隨着滾動條向下滾動時而消失*/
    background-attachment: fixed;
}

background-size

規定背景圖片的尺寸，能夠本身定義。這個標籤是CSS3纔有的

body{
    /*修改body背景顏色*/
    background-color: #7DBBDA;
    /*在body中增長圖片*/
    background-image: url("bt.png");
    /*設置圖片不重複*/
    background-repeat: no-repeat;
    /*自定義圖片大小*/
    background-size: 100px 500px;

}