JavaWeb學習之路(28)–CSS之背景詳解

1. 前言

之前講了文本和字型，用來設定文字相關的樣式。

本篇講述下背景的用法，包括背景色、背景圖像、背景圖像的平鋪方式、背景圖像的定位，以及整個背景樣式的簡寫方式。

2. 設定背景色

我們可以通過background-color給标簽設定背景顔色，例如：

<div style="background-color: yellow;">

       <p>

           春眠不覺曉

       </p>

           處處聞啼鳥

           夜來風雨聲

           花落知多少

   </div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

上述代碼我們就為div區域設定了黃色的背景色，是以效果如下：

3. 設定背景圖檔

如果覺得背景色不夠好看，還可以找一張圖檔作為背景圖，就想我們電腦或者手機的桌面一般。

我們在images檔案夾下放置一張2.jpg，然後通過background-image來設定背景圖。

<div style="background-image:url(images/2.jpg);">

效果如下，可以發現雖然背景圖顯示出來了，但是重複顯示了很多張，并不好看。

4. 背景圖平鋪

我們可以通過background-repeat屬性來設定背景圖的平鋪方式。

什麼叫平鋪呢，就是圖像在視窗上是如何鋪設的，是橫向一張一張的鋪，還是不平鋪隻展示一張圖檔，還是縱向的一張一張的鋪。

4.1 不平鋪

可以選擇讓背景圖不平鋪，使用background-repeat:no-repeat即可。

<div style="background-image:url(images/2.jpg);background-repeat: no-repeat;">

效果如下，此時背景圖隻顯示一張，不會重複。

4.2 水準平鋪

使用background-repeat:repeat-x;，可以設定水準平鋪，效果如下：

4.3 垂直平鋪

使用background-repeat:repeat-y;，可以設定垂直平鋪，效果如下：

注意垂直平鋪，得當垂直方向的高度超出背景圖高度時，才需要重複，是以我們多些了一些詩句，将高度撐的更高一些。

4.4 兩個方向平鋪

如果是預設不寫，則是水準、垂直方向都會平鋪，效果如下：

5. 背景定位

可以使用background-position改變圖像在背景中的位置，例如：

  <div style="background-image:url(images/2.jpg);background-repeat: no-repeat;background-position: right top;">

将圖像位置設定為了右側、上方，是以效果如下：

6. 背景簡寫

背景相關的樣式比較多，如果逐一寫下來，還是挺費勁的，是以還有一種簡寫方法，如下：

<div style="background:yellow url('images/2.jpg') no-repeat right top;">

一個background樣式名，同時設定了背景色、背景圖、平鋪方式、定位。

這種寫法更簡單，也更常見！

7. 小結

背景圖經常會用在登入界面，選擇一張大圖檔，當做整個界面的背景(為body标簽設定背景即可)。

大家可以嘗試下使用背景圖設計一個好看的登入界面。