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

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

目錄

• 背景
  • 1. PS 的基本設置
  • 2. 背景
  • 練習 1：線性漸變效果的背景圖
  • 練習 2：按鈕點擊效果

背景

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 軟件進行切圖

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

2. 然后選擇圖像-裁剪，就可以得到一個我們需要的一個背景圖片

3. 最后，選擇文件-存儲為Web所用格式

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

5. 得到我們需要的背景圖片之后，就可以引入到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>

效果