【Web前端HTML5&CSS3】13-背景

阿新 • • 發佈：2021-06-12

筆記來源：尚矽谷Web前端HTML5&CSS3初學者零基礎入門全套完整版

背景

背景

1. PS的基本設定

工欲善其事，必先利其器

在介紹背景之前，首先需要做好準備工作：安裝PS與基本設定

這裡就不詳細介紹PS的安裝了，因為網上一抓一大把，主要介紹PS的基本設定

左側工具欄

調成2列，更方便使用

右側工具欄

不需要的檢視統統關掉

修改單位為畫素

由於一般預設的單位是釐米，所以這裡需要修改

在歷史記錄、顏色或色板附近右鍵，開啟選項卡，選擇介面選項

開啟單位與標尺，修改單位中的標尺與文字為畫素

2. 背景

background-color 設定背景顏色
background-image 設定背景圖片
- 如果背景圖片大小小於元素，則背景圖片會自動在元素中平鋪將元素鋪滿
- 如果背景圖片大小大於元素，則背景圖片一部分會無法完全顯示
- 如果背景圖片大小等於元素，則背景圖片會直接正常顯示
background-repeat 設定背景圖片的重複方式
- repeat 預設值，背景圖片沿著x軸和y軸雙方向重複
- repeat-x 背景圖片沿著x軸方向重複
- repeat-y 背景圖片沿著y軸方向重複
- no-repeat 背景圖片不重複
background-position 設定背景圖片的位置
- 通過top
  
  left right bottom center幾個表示方位的詞來設定背景圖片的位置：使用方位詞時必須要同時指定兩個值，如果只寫一個則第二個預設就是center
- 通過偏移量來指定背景圖片的位置：水平方向偏移量、垂直方向變數
background-clip 設定背景的範圍
- border-box 預設值，背景會出現在邊框的下邊
- padding-box 背景不會出現在邊框，只出現在內容區和內邊距
- content-box 背景只會出現在內容區
background-origin 背景圖片的偏移量計算的原點
- border-box 背景圖片的變數從邊框處開始計算
- padding-box 預設值，background-position
  
  從內邊距處開始計算
- content-box 背景圖片的偏移量從內容區處計算
background-size 設定背景圖片的大小
- 第一個值表示寬度，第二個值表示高度；如果只寫一個，則第二個值預設是auto
- cover 圖片的比例不變，將元素鋪滿
- contain 圖片比例不變，將圖片在元素中完整顯示
background-attachment 背景圖片是否跟隨元素移動
- scroll 預設值，背景圖片會跟隨元素移動
- fixed 背景會固定在頁面中，不會隨元素移動

可以同時設定背景圖片和背景顏色，這樣背景顏色將會成為圖片的背景色

示例1

.box1 {
    height: 500px;
    width: 500px;
    overflow: auto;
    border: 20px red double;
    padding: 10px;
    /* 背景色 */
    background-color: darksalmon;
    /* 背景圖 */
    background-image: url('/assets/背景.png');
    /* 背景圖重複方式 */
    background-repeat: no-repeat;
    /* 背景圖偏移位置 */
    background-position: 0 0;
    /* 背景圖偏移量計算的原點 */
    background-origin: content-box;
    /* 背景範圍 */
    background-clip: content-box;
    /* 背景圖片大小 */
    background-size: contain;
}

.box2 {
    width: 100px;
    height: 1000px;
    background-color: orange;
    background-image: url("assets/背景2.jpg");
    background-repeat: no-repeat;
    background-position: 50px 50px;
    /* 背景圖片是否跟隨移動 */
    background-attachment: fixed;
}

backgound 背景相關的簡寫屬性，所有背景相關的樣式都可以通過該樣式來設定並且該樣式沒有順序要求，也沒有哪個屬性是必須寫的

注意

background-size必須寫在background-position的後邊，並且使用/隔開background-position/background-size
background-origin background-clip 兩個樣式，orgin要在clip的前邊

示例2

.box1 {
    height: 500px;
    width: 500px;
    border: 10px red double;
    padding: 10px;
    background: #bfa url("assets/dlam.png") no-repeat 100px 100px/200px padding-box content-box;
}

練習1：線性漸變效果的背景圖

如果我們仔細掛那可能，會發現很多網站導航條的背景色並不是單一的某種顏色，而是有一個漸變的效果

不過到目前為止，我們還沒有學習線性漸變的內容，不過憑上面所學的知識同樣可以實現

切圖

首先，我們需要通過PS軟體進行切圖

按住Alt同時滾動滑鼠滑輪，可以對圖片大小進行縮放；調整至合適大小，再選擇矩形塊工具，擷取一個寬度為1px大小的圖片

然後選擇影象-裁剪，就可以得到一個我們需要的一個背景圖片

最後，選擇檔案-儲存為Web所用格式

我這裡選擇的是PNG的格式，你可以對比幾種格式，看看最終的圖片大小折中選擇，最好選擇儲存位置即可

得到我們需要的背景圖片之後，就可以引入到css樣式中了

程式碼

height: 60px;
width: 1500px;
background: url("assets/背景3.png") repeat-x;

效果

練習2：按鈕點選效果

程式碼

<style>
    a:link {
        /* 因為本身是行內元素，變成塊元素更方便設定寬高 */
        display: block;
        width: 93px;
        height: 29px;
        background: url("assets/背景/練習2-背景/link.png");
    }

    a:hover {
        background: url("assets/背景/練習2-背景/hover.png");
    }

    a:active {
        background: url("assets/背景/練習2-背景/active.png");
    }
</style>

<a href="javascript:;"></a>

效果